Удаление подчеркивания в URL [text-decoration: none; не работает]

Я хочу удалить подчеркивание. Я уже положил text-decoration: none;. Однако это не сработает. Вот DEMO.

HTML

<a href="./index.php?sign_in=1">
 <div id="signup_button">
 Sign up
 </div>
</a>

CSS

#signup_button {
 position: relative;
 max-width: 206px;
 min-height: 20px;
 max-height: 40px;
 margin: auto;
 margin-top: 10px;
 padding: 10px 10px 10px 10px;
 background-color: #0096cc;
 text-align: center;
 color:#fff;
 font: 35px/1 "Impact";
 text-decoration: none;
}
4 ответа

text-decoration принадлежит тегу "a", но вы также можете избавиться от div.

Если вы установите отображение: блок на a, вы получите тот же эффект

<a href="./index.php?sign_in=1">Sign up</a>

теперь выглядит точно так же, как

<a href="./index.php?sign_in=1">
 <div>
 Sign up
 </div>
</a>

используя

.signup_button {
 position: relative;
 max-width: 206px;
 min-height: 20px;
 max-height: 40px;
 margin: auto;
 margin-top: 10px;
 padding: 10px 10px 10px 10px;
 background-color: #0096cc;
 text-align: center;
 color:#fff;
 font: 35px/1 "Impact";
 display:block;
}
a {
 text-decoration: none;
}


Set

a {
 text-decoration:none;
}

перед вашим стилем. Подчеркивание идет оттуда.


Вам нужно установить text-decoration: none в элементе a, а не внутри div.

Кроме того, не рекомендуется применять элементы уровня блока, такие как divs внутри встроенных элементов, таких как anchors. Вы должны просто применить все стили #signup_button непосредственно к a и избавиться от div.


Вы не должны размещать DIV внутри тега A. Я сделал некоторые изменения, которые заставят его работать.

HTML

<div id="signup_button_container">
 <a id="signup_button" href="./index.php?sign_in=1">
 Sign up
 </a>
</div>

CSS

#signup_button_container {
 text-align: center;
}
#signup_button {
 position: relative;
 display: inline-block;
 max-width: 206px;
 min-height: 20px;
 max-height: 40px;
 margin: auto;
 margin-top: 10px;
 padding: 10px 30px;
 background-color: #0096cc;
 color:#fff;
 font: 35px/1 "Impact";
 text-decoration: none;
}

http://jsfiddle.net/96sf8/4/

licensed under cc by-sa 3.0 with attribution.