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

Question

我正在尝试使用 HTML 和 CSS 制作两个彼此水平对齐的按钮。我就在那里，但我无法获得水平填充页面的按钮。按钮的宽度应相等，但它们应拉伸(stretch)以填满页面。

我试着让“li”和“a”标签的宽度为 100%，但这没有任何影响。按钮“a”标签上的填充仅影响左侧和右侧，而不是预期的顶部和底部。我做错了什么？

下面是我的代码、Fiddle 和图表。

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>

fiddle : http://jsfiddle.net/vET6C/

Answer 1

有几种方法可以做到这一点，这是其中一种。您的 li 被设置为 display:inline ，它忽略了 width 属性。 float 它们或将它们设置为 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;
}