我创建了几个简单的按钮,使用链接和一些 CSS 为其提供背景,并试图将其置于我的页面中央。但是,因为其中一个按钮中的文本比另一个长,所以按钮的大小不同,为了保持一致性,我希望它们的宽度相同。
如何使这些按钮保持相同大小?尝试 float 它们并使用百分比宽度会导致它们不居中。相关标记如下。
<section class="buttonsSection">
<a class="button" href="#">Very Long Sentence</a>
<a class="button" href="#">Short Phrase</a>
</section>
.button {
padding: 10px 15px;
background-color: deepskyblue;
color: white;
}
.buttonsSection{
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.buttonsSection a {
margin: 3px;
}
JSFiddle:http://jsfiddle.net/Dragonseer/eTvCp/11/
回答 虽然下面的两个答案都是有效的,但我正在更新使用 Flexbox 的答案。 Most modern browsers have excellent support for it ,包括即将发布的IE11。 Flexbox 似乎为复杂布局提供了更好的解决方案,与它的替代方案(例如 float 元素)相比,它需要更少的努力。
最佳答案
在按钮上使用带有 inline-block
的固定宽度。
.button {
padding: 10px 15px;
background-color:deepskyblue;
color: white;
display: inline-block;
width: 20%; /*or any other width that suites you best*/
}
.callToAction {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
使用 inline-block
在元素之间提供一点边距(由 HTML 中的空白引起)所以我从 CSS 中删除了 marin,但你可以把它放回去.
关于html - 按钮链接格式 - 居中和匹配宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19071114/