Question

我不知道为什么会有这条小线将这些按钮连接在一起。有人知道css让它消失吗？

    <div class="button">
    <a href="registerFacebook.php"> <button> Register with <br> facebook </button> </a>
    <a href="register.php"> <button> Make a new account </button> </a>
    </div> <!--end of div button-->

    .button{
text-align:center;
     }

非常感谢：）

Answer 1

它是由默认的锚标记属性或text-decoration: underline;引起的。

您可以简单地添加通用锚标记样式，以便从所有链接中删除它，如下所示：

a {
    text-decoration: none;
}

或仅限于.button中的那些：

.button a {
    text-decoration: none;
}

最后一个小提琴：Demo

Answer 2

试试这个

<a href="registerFacebook.php"> <button> Register with <br> facebook </button></a>

我删除了关闭按钮和锚标记之间的空格

http://jsfiddle.net/4GHH4/1/

Answer 3

这是链接的默认下划线。您看到的行实际上是由于按钮末尾和链接标记结尾之间的空格。

</button> </a>

将其更改为：

<div class="button"><a href="registerFacebook.php"><button> Register with <br /> facebook </button></a>
 <a href="register.php"><button> Make a new account </button></a>
</div>

<强> jsFiddle example

Answer 4

<div class="button">
    <a href="registerFacebook.php"><button>Register with <br> facebook</button></a>
    <a href="register.php"><button>Make a new account</button></a>
</div> <!--end of div button-->

您的锚标记中的空白区域导致了您的问题。只需删除它们就可以解决问题。

彼此相邻的按钮由随机线链接。我如何摆脱它？

4 个答案: