Question

我希望两个div并排占据窗口的所有宽度。我对它们使用display:inline-block，以便它们表现为水平。

<div id="left" class="horizontal">hello</div>
<div id="right" class="horizontal">world</div>

问题在于，当我将它们的宽度设置为100％（左边20％，右边80％）时，它们比屏幕大，而右边的div被推到另一个下面。

我通过将宽度设置为小于100％（19％和79％）来解决这个问题，但是这会在以后遇到一些小问题，有时会把不需要的空间放在我不想要的地方。

在使用100％的屏幕时，我错过了什么才能让我的div水平相处？

我看到了here以及this question中列出的技巧......其中大多数都是如此丑陋，我仍然喜欢使用小于100％的宽度。

* {
    padding:0;
    margin:0;
    border:0;
    border-spacing:0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
html {
    height:100%;
}
body {
    height:100%;
}
#left {
    background-color: red;
    width:20%;
    height:100%;
}
#right {
    background-color: green;
    width:80%;
    height:100%;
}
.horizontal {
    display: inline-block;
}

Answer 1

它与display：inline-block有关，它在项之间添加了少量像素。我也遇到过这个问题。

来自[CSS-Tricks]（https://css-tricks.com/fighting-the-space-between-inline-block-elements/）

Answer 2

如果您不一定需要使用inline-block，我建议您改用block。 block是display的{{1}}的默认值，因此您无需明确设置它。只需将div设置为float，您就不必“打击内联块元素之间的空间”。

示例：

left

如何在屏幕上制作总共100％宽度的两个div

2 个答案: