Html 内联块元素之间的空格和换行符占用空间_Html_Css

Html 内联块元素之间的空格和换行符占用空间

html css

Html 内联块元素之间的空格和换行符占用空间,html,css,Html,Css,我使用中的“display:inline block”编写了一个包含flex列的页面，但遇到了空格和换行符的问题：尽管.left和.right都是宽度：50%，但由于它们之间有空格和换行符，它们实际上占据了100%以上的宽度，因此.right只会转到下一行  <div class="container"> <div class="left box"> </div>

我使用中的“display:inline block”编写了一个包含flex列的页面，但遇到了空格和换行符的问题：

尽管

.left

和

.right

都是

宽度：50%

，但由于它们之间有空格和换行符，它们实际上占据了100%以上的宽度，因此

.right

只会转到下一行

<!--demo 1-->
<div class="container">
    <div class="left box">
    </div>
    <div class="right box">
    </div>
</div>

那么，要保留缩进吗？

在CSS中添加两个类：

.lfloat {
    float: left;
}

.clrflt {
    clear: both;
}

将HTML代码更改为：

<!--demo 1-->
<div class="container">
    <div class="left box lfloat"></div>
    <div class="right box lfloat"></div>
    <div class="clrflt></div>
</div>

您可以浮动div，而不是内联阻塞它们，尽管之后您必须担心清除浮动。我知道浮动是有效的，但是

内联框

不是更现代、更灵活吗？G+对列也使用

内联框

。

<!--demo 1-->
<div class="container">
    <div class="left box lfloat"></div>
    <div class="right box lfloat"></div>
    <div class="clrflt></div>
</div>

<html>
    <head>
        <style>
        *{padding:0;margin:0}
        ul#container{width:204px}  //Had to add 4px for extra width
         ul#container li{display:inline-block;height:100px;width:100px;background:#666}
        .left{width:50%}
        .right{width:50%;background:#0ca}
        </style>
    </head>
    <body>
        <ul id="container">
           <li>Left</li>
           <li>Right</li>
        </ul>
    </body>
    </html>