3

I want to delete underline. I have already put text-decoration: none;. However it doesn't work. Here is a 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

4 回答 4

7

放

a {
    text-decoration:none;
}

在你的风格之前。下划线来自那里。

于 2013-09-25T12:34:12.823 回答
3

text-decoration属于“a”标签，但也可以去掉div。

如果你在 a 上设置 display:block，你有同样的效果

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

现在看起来完全一样 

<a href="./index.php?sign_in=1">
  <div class="signup_button">
    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;
}


.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;
}
<a href="./index.php?sign_in=1" class="signup_button">Sign up</a>
<p><hr /></p>
<a href="./index.php?sign_in=1">
  <div class="signup_button">
    Sign up
  </div>
</a>

于 2013-09-25T12:42:18.183 回答
3

您需要text-decoration: none在a元素上设置而不是在其div内部。

此外，将块级元素divs（如anchors. 您应该将所有#signup_button样式直接应用于a并摆脱div.

于 2013-09-25T12:37:16.737 回答
2

您不应将 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/

于 2013-09-25T12:44:29.587 回答