HTML / CSS水平对齐按钮未按预期填充页面

Question

我正在尝试使用HTML和CSS制作两个水平对齐的按钮。我只是在那里，但我无法让按钮水平填充页面。按钮的宽度应相等，但应拉伸以填充页面。

我试过制作＆＃34; li＆＃34;和＆＃34; a＆＃34;标签的宽度为100％，但这没有任何影响。按钮上的填充＆＃34; a＆＃34;标签仅影响左侧和右侧，而不是预期的顶部和底部。我做错了什么？

下面是我的代码，小提琴和图表。

CSS：

#myButtons {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#myButtons li {
    display: inline;
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border: 2px solid #F00; 
    background-color: #FF0;
    width: 100%; /* Doesn't make any difference */
}
#myButtons a {
    width: 100%; /* Doesn't make any difference */
    padding: 50px; /* Padding is only being applied to the left and right of the button links not the top and bottom as well */
}

HTML：

<p>The button's CSS styles should not affect other elements on the page.</p>
<ul id="myButtons">
  <li><a href="#">Call Us</a></li>
  <li><a href="#">Go To Full Site</a></li>
</ul>
<p>The button's CSS styles should not affect other elements on the page.</p>

小提琴： http://jsfiddle.net/vET6C/

Answer 1

有几种方法可以做到这一点，这是其中之一。您的li设置为display:inline，忽略了width属性。浮动它们或将它们设置为display:inline-block将解决该问题。

a元素默认为内联，因此宽度也被忽略。内联元素也不会以您期望的方式应用顶部和底部填充。我是这样说的，因为我并非100％确定如何应用它，但将其更改为inline-block或block会使其按预期方式工作。

http://jsfiddle.net/vET6C/1/

#myButtons li {
    float:left;
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border: 2px solid #F00; 
    background-color: #FF0;
    width: 50%; /* Doesn't make any difference */
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
#myButtons a {
    display:block;
    padding:50px;
}