Question

我在页面上创建了一个带有两个按钮（即链接）的页面。由于未知原因，在chrome，ff和ie中的按钮之间显示短划线。我试图在按钮之间获得一点点空间而不是这个奇怪的破折号。以下是一些简单的示例代码来复制问题：

<!DOCTYPE html>
<meta charset='utf-8'> 

<html>
    <head><title>Button Dashes?</title></head>
    <body>
        <div>
            <a href="http://www.google.com">
                <button>Google</button>
            </a>
            <a href="http://www.yahoo.com">
                <button>Yahoo</button>
            </a>
        </div>
    </body>
</html>

删除按钮之间的短划线需要做什么？

Answer 1

将您的代码更新为：

    <div>
        <a href="http://www.google.com"><button>Google</button></a>
        <a href="http://www.yahoo.com"><button>Yahoo</button></a>
    </div>

链接的默认样式为underlines，因此空格只是一个下划线。以下是一个示例：http://jsfiddle.net/wCfBR/

以下是使buttons像链接一样行动的一些替代方法：How to create an HTML button that acts like a link?

Answer 2

在CSS文件中声明，或直接在锚元素上声明无文本修饰

<a href="http://www.google.com" style="text-decoration : none;">

Answer 3

在包裹按钮的锚标记上设置 text-decoration: none;。

删除两个按钮链接之间的短划线

3 个答案: