Question

我想删除下划线。我已经放了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;
}

Answer 1

集

a {
    text-decoration:none;
}

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

Answer 2

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

此外，将anchors等块级元素放在内联元素（如#signup_button）中并不是一种好习惯。您应该直接将所有a样式应用于div并删除{{1}}。

Answer 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>

Answer 4

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

删除URL中的下划线[text-decoration：none;不起作用]

4 个答案: