【问题标题】：Making a button via CSS, but instead get two bars on top通过 CSS 制作一个按钮，但在顶部有两个栏
【发布时间】：2014-06-16 14:04:34
【问题描述】：

我正在尝试为我的链接创建一个按钮，该按钮的名称在按钮上并允许用户单击它并转到链接。

我也不确定为什么，但我的链接“可点击范围”似乎已扩展。

代码如下：

<body>
<div id="container">

<a href="http://www.medium.com/" target="Medium"><div id="link">My Favorite Website</div></a>

    </div>
</body>

这里是 CSS：

#container {
width:960px;
margin-left: auto;
margin-right: auto;
padding: 30px 0px;
}

a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
}

#link {
padding: 7px;
font-size: 15px;
font-weight: bold;
font-style: italic;
}

谢谢！

【问题讨论】：

不要将 div 包裹在中以获取简单的文本，而是使用 span :)
您的问题到底是什么？ “我的‘墨水’可点击范围’似乎被扩展了”是什么意思？为什么会有问题？
@GCyrillus 感谢您的建议！如您所见，我刚刚开始前端 Web 开发，所以我刚刚习惯了它。感谢您的帮助
@RoToRa 你好！我的意思是说，每当“我最喜欢的网站”链接似乎可以在行中的任何位置点击时，这意味着我什至不必将鼠标悬停在实际文本本身上。感谢询问

标签： html css button padding

【解决方案1】：

您的链接是内联元素，因此您需要将其设置为块或内联块以添加样式：

CSS

a {
    display:inline-block;
}

【讨论】：

非常感谢！希望我能更多地了解内联与块！

【解决方案2】：

在内联元素中包含块元素会导致您的问题。

默认情况下，锚点显示为inline。您需要以不同的方式显示它，如inline-block:

a {
    padding: 7px 100px;
    border-radius: 10px;
    background-size: 80px 60px;
    background-color: green;
    text-decoration: none;
    display:inline-block;
}

JSFiddle

【讨论】：

【解决方案3】：

把div标签去掉成标签..

Demo

<div id="container">

<a href="http://www.medium.com/" target="Medium">My Favorite Website</a>

</div>

【讨论】：

【解决方案4】：

只需将其添加到 CSS 中的#link

appearance:button;
-moz-appearance:button; 
-webkit-appearance:button;

【讨论】：

【解决方案5】：

是一个内联元素。为了让它表现得像块级元素，你需要在 CSS 中定义它的 display 属性。

{display:block;} 或 {display:inline-block;}

并且您的链接“可点击范围”似乎已扩展，因为您在标签内使用的是块级元素 a 。

块级元素占据其容器的整个宽度。

你需要重新定义它的行为。

link{display:inline-block;} 或 #link{display:inline;}

【讨论】：