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

I have created a page with two buttons (that are links) on a page. For an uknown reason, a dash displays between the buttons in chrome, ff, and ie. I am trying to get just a little bit of space between the buttons instead of this weird dash. Here is some simple sample code to replicate the issue:

我在页面上创建了一个带有两个按钮(即链接)的页面。由于未知原因,在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>

What do I need to do to remove the dash between the buttons?

我需要做什么来删除按钮之间的破折号?

2 个解决方案

#1

Update your code to this:

将您的代码更新为:

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

Default style for links have underlines so the whitespace is going to be just an underline. Here is an example: http://jsfiddle.net/wCfBR/

链接的默认样式有下划线,因此空格只是一个下划线。这是一个例子:http://jsfiddle.net/wCfBR/

Here are some alternative ways to make buttons act like links: How to create an HTML button that acts like a link?

以下是一些使按钮像链接一样的替代方法:如何创建一个像链接一样的HTML按钮?

#2

Either declare in a CSS file, or directly on the anchor element, a text-decoration of none

要么在CSS文件中声明,要么直接在锚元素上声明无文本修饰

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

#1