Question

我在div中有两个fieldsets（如下所示）。它们采用直列式和50％宽度。在我的脑海中，我认为它们应该显示在同一条线上，但（至少在chrome中，没有检查IE或ff）第二个包裹到下一行。

我有一个双重问题：

为什么哦为什么哦为什么！？
这有一个简单的解决方法吗？（除了可能将它们设置为49.8％宽度）？

*
{
    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>

编辑我按照预期将内联更改为内联块。对不起那里的混乱。

Edit2 如果可能的话，也不愿意做任何浮动。

EDIT3 我的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包装的原因。

将小提琴中的HTML代码更改为以下内容可以解决您的问题：

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

或者你可以只写相邻的所有标签，只要它们之间没有空格。

Answer 2

你的CSS有很多错误，请在逻辑上学习和写作。顺便一下，你想这样吗??

DEMO

修改

我发现以下事情不是很好的做法，如果我错了请纠正我

使用div div {}会产生误导，最好使用 class 和 id 选择器
还会优化您的CSS，当您总是需要边距，填充和边框为0px 时，为什么不用 * {}
并按照元素在DOM中的顺序设置css，首先为 fieldeset 声明css，然后为 div 设置css规则

@James有效CSS是另一个问题，优化CSS是另一个

50％宽度内联子节点换行

2 个答案:

DEMO

修改