div之间的换行符会渲染一个空格.如何从HTML中消除它？

Question

我有以下布局

<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输出来删除换行符.

Answer 1

另一种可能的方法是将父元素的font-size设置为零,然后将子元素的font-size设置为您需要的任何元素.喜欢:

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

但是,您必须知道font-size = 0根据浏览器的不同而不同:http://webdesign.about.com/od/fonts/qt/tipfont0.htm

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

Answer 2

我认为唯一真正好的解决方案是用列表切换 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>项目之间生成空间。