0

我已经使用链接和一些 CSS 创建了几个简单的按钮来给它一个背景，我正试图将它放在我的页面上。但是，由于其中一个按钮中的文本比另一个长，因此按钮的大小不同，为了保持一致性，我希望它们具有相同的宽度。

如何保持这些按钮的大小相同？尝试浮动它们并使用百分比宽度会导致它们不居中。相关标记如下。

<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 的回答。大多数现代浏览器对它都有很好的支持，包括即将发布的 IE11。Flexbox 似乎为复杂的布局提供了更好的解决方案，它比其他替代方案（例如浮动项目）需要更少的努力。

4

3 回答 3

2

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，但您可以将其放回原处。

于 2013-09-28T20:09:15.233 回答
1

使用flexbox轻松完成：

.button {
    padding: 10px 15px;
    width: 150px; /* Fixed width links */
    background-color:deepskyblue;
    color: white;
    margin: 3px;
}

.callToAction {
    margin: 30px 0;
    display: flex; /* Magic! */
    justify-content: center; /* Centering magic! */
}

工作示例

于 2013-09-28T20:12:24.373 回答
0 
.button 
 {
     width: 150px; /* Your custome size */
     background-color:deepskyblue;
     color: white;
     margin: 3px;
     padding: 10px 15px;
 }

Section a
 {
    width: 150px; /* for your all buttons */
 }
于 2013-09-28T22:45:21.337 回答