How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

Question

Here i want to use two buttons which cover the entire screen width and the buttons should have equal width. And alo there should not be any space between these buttons.

I tried with the following HTML and CSS codes but i didn't get what i expect;

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>

I tried the code here here the buttons not covering the entire screen size also a small gap is there between these two buttons. How to tackle this issue? Thank you..

Answer 1

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

Q1：按钮没有覆盖整个屏幕尺寸

原因是：

1. 盒子模型。默认情况下，宽度计算不包括填充。为了安全起见，您应该首先设置box-sizing: border-box并重置填充和边距。
2. 该container是什么100％？更好的是，在父级 ie 上设置宽度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：这两个按钮之间也有一个小间隙

原因是：

按钮本质上是内联元素，这意味着空白计数。

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

1. 注释掉空格。
2. 设置float开启按钮。

示例 1（使用注释）：

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

示例 2（使用浮点数）：

.container > button {
    float: left;
}

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

.