16

我有以下布局

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div>
    <div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

因为在 html 中，在关闭和打开 div（div1 和 div2）之间有一个换行符，浏览器会添加一个“空格”字符来代替换行符，这会导致第二个 div 显示在第一个 div 下方。

但是，如果您删除 div1 和 div2 之间的 \n ，那么它们会彼此相邻显示，这是预期的行为。

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div><div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

然而，这使得代码看起来很难看。我目前正在使用<DOCTYPE html>. 我也尝试过切换到 XHTML，但没有成功。我很确定有一些方法可以消除这种换行行为，有什么想法吗？

仅供参考：我不想在渲染期间使用浮点数或在 php 中解析我的 html 输出以删除换行符。

4

4 回答 4

8

另一种可能的方法是将父元素的字体大小设置为零，然后将子元素的字体大小设置为您需要的任何值。像：

#mybar { font-size: 0; }
#mybar span { font-size: 14px; }

但是，您必须注意 font-size = 0 的显示因浏览器而异：http ://webdesign.about.com/od/fonts/qt/tipfont0.htm

我在 Firefox 中测试并按预期工作。如果我没记错的话，最小字体大小也可以根据浏览器设置，所以可能不一致。

于 2013-03-08T04:34:31.327 回答
2

使用换行符时删除 HTML 元素之间的空格可能重复

您可以使用float:leftcss 样式或仅注释标签之间的空格：

<div style="width:100px">
    <div style="width:50%; display: inline-block;">
        div1
    </div><!--
    --><div style="width:50%; display: inline-block;">
        div2
    </div>
</div>

稍后编辑：我认为 css 解决方案是设置font-size:0px;为容器 div 所以：

<div style="width:100px; font-size:0px;">
    <div style="width:50%; display: inline-block; font-size:11px;">
        div1
    </div>
    <div style="width:50%; display: inline-block; font-size:11px;">
        div2
    </div>
</div>

应该解决问题。

在 CSS 上看到锚标签元素之间不需要的间距

于 2012-10-25T06:51:24.860 回答
1

我认为唯一真正好的解决方案是用列表切换 div

<ul style="width:100px">
    <li style="width:50%; display: inline-block;">
        div1
    </li>
    <li style="width:50%; display: inline-block;">
        div2
    </li>
</ul>

通常“重置”列表属性会使它看起来像一个 div。好处是浏览器不会在<li>项目之间产生空间。

于 2012-10-26T07:41:58.440 回答
1

修复它的一种方法是使用“ display: table-cell ”而不是“display:inline-block”。

于 2013-03-08T04:22:37.460 回答