html - 如何通过完全填充屏幕大小将两个 html 按钮水平排列在一条宽度相等的单行中

Question

这里我想使用两个覆盖整个屏幕宽度的按钮，并且按钮的宽度应该相等。此外，这些按钮之间不应有任何空格。

我尝试使用以下 HTML 和 CSS 代码，但没有得到我期望的结果；

CSS

#container
{
    width:100%
}         
#button1
{
    width:50%;
}
#button2
{
    width:50% 100%;
}

HTML

<div id="container">
  <button id="button1">Button1</button>
  <button id="button2">Button2</button>
</div>

我尝试了代码 here这里的按钮没有覆盖整个屏幕尺寸，这两个按钮之间也有一个小间隙。如何解决这个问题？谢谢..

Answer 1

演示:http://jsfiddle.net/abhitalks/XkhwQ/7/

Q1: buttons not covering the entire screen size

原因是:

1. 盒子模型。默认情况下，宽度的计算不包括填充。为了安全起见，您应该首先设置 box-sizing: border-box 并重置 paddings 和 margins。
2. 容器 是什么的 100%？更好的是，在父级上设置宽度，即 body。

您可以通过以下方式缓解这种情况:

* {
    margin: 0; padding: 0; box-sizing: border-box; /* reset */
}
html, body {
    width: 100%; /* specify width on parent */
}
.container {
    width: 100%
}
button {
    width: 50%; /* make the children equal */
}

.

Q2: also a small gap is there between these two buttons

原因是:

按钮本质上是内联元素，这意味着空白很重要。

您可以通过两种方式缓解这种情况:

1. 注释掉空格。
2. 在按钮上设置 float 。

示例 1(使用注释):

<div class="container">
    <button>Button1</button><!--
    --><button>Button2</button>
</div>

示例 2(使用 float ):

.container > button {
    float: left;
}

演示 ( http://jsfiddle.net/abhitalks/XkhwQ/7/) 涵盖并说明了这两个问题。

.