css - 50% 宽度内联子节点换行

Question

我在一个 div 中有两个字段集(如下所示)。它们是内联样式和 50% 宽度。在我看来，我认为它们应该显示在同一行但是(至少在 chrome 中，没有检查 IE 或 ff)第二个换行到下一行。

我有两个问题:

1. 为什么哦为什么哦为什么!？
2. 有没有简单的解决方法？ (除了可能将它们设置为 49.8% 宽度)？

http://jsfiddle.net/z22KR/2/

*
{
    box-sizing: border-box;
}
fieldset
{
    margin: 0px;
    border: 0px;
    padding: 0px;
    display: inline-block;
    width: 50%;
    background-color: grey;
}

div
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: green;
}

div div
{
    background-color: red;
}

<div>
    <fieldset>1</fieldset>
    <fieldset>2</fieldset>
    <div>div</div>
</div>

编辑 我按预期将 inline 更改为 inline-block。抱歉造成困惑。

Edit2 如果可能的话，也宁愿不做任何 float 。

编辑3我的 html 看起来更像

<div class="twoChildren">
    <fieldset id="fieldset1"><legend>Fieldset 1</legend>
        <div id="listofStuff1">
            <table>
            ...
            </table>
        </div>
    </fieldset>
    <fieldset id="fieldset2"><legend>Fieldset 2</legend>
        <div id="listofStuff2">
            <table>
            ...
            </table>
        </div>
    </fieldset>
</div>

Answer 1

问题是由您的 HTML 引起的。 HTML 源代码中的所有空格都显示为单个空格字符——我不确定这方面的确切技术细节。 div 元素之间的空间内容导致第二个子 div 换行。

将 fiddle 中的 HTML 代码更改为以下内容可以解决您的问题:

<div><!--
    --><fieldset>1</fieldset><!--
    --><fieldset>2</fieldset><!--
    --><div>div</div><!--
--></div>

或者您可以将所有标签写成彼此相邻，只要它们之间没有空格即可。