Css 50%宽度内联子节点换行

我有两个字段集（如下所示），它们位于一个div内。它们的样式是内联的，宽度为50%。在我的脑海中，我认为它们应该显示在同一行上，但（至少在chrome中，没有检查IE或ff）第二行会包装到下一行

我有一个双重问题：

为什么，为什么，为什么

有没有简单的解决办法？（除了可能将其设置为49.8%的宽度）

*
{
框大小：边框框；
}
字段集
{
边际：0px；
边界：0px；
填充：0px；
显示：内联块；
宽度：50%；
背景颜色：灰色；
}
div
{
宽度：100%；
边际：0px；
填充：0px；
边界：0px；
背景颜色：绿色；
}
div div
{
背景色：红色；
}
1.
2.
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>

字段集1
...
字段集2
...

您的css中有许多错误，请仔细研究并逻辑地编写。顺便说一句，你想要这样吗

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

• 使用

  div div{}

  有误导性，最好使用类和id选择器
• 同时优化css，当您总是需要边距、填充和边框到0px时，为什么不在顶部用*{}
• 也可以按照元素在DOM中的顺序设置css，首先为fieldeset声明css，然后为div设置css规则

---

@James Valid CSS是另一个问题，而优化CSS是另一个问题

您的CSS中有许多错误，请学习并逻辑地编写。顺便说一句，你想要这样吗

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

• 使用

  div div{}

  有误导性，最好使用类和id选择器
• 同时优化css，当您总是需要边距、填充和边框到0px时，为什么不在顶部用*{}
• 也可以按照元素在DOM中的顺序设置css，首先为fieldeset声明css，然后为div设置css规则

---

@James Valid CSS是另一个问题，而优化CSS是另一个问题。这个问题是由您的HTML引起的。HTML源代码中的所有空白都显示为单个空格字符-我不确定这方面的确切技术细节。div元素之间的空格内容是导致第二个子div换行的原因

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

12div

---

或者，只要标记之间没有空格，就可以将所有标记彼此相邻地写入。

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

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

12div

---

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

不知道如何解决您遇到的问题，但有一件事让我马上想到，您的字段集显示为：inline，然后尝试为它们指定宽度。内联元素不能有宽度。尝试显示：内联块或显示：块；浮动：左；相反此外，使用border:none可能会更好；代替边界：0px#戈登姆·奥普斯。。我在之前的一次迭代中也尝试过内联块，一定是错误地将其保留了下来。不确定如何解决您遇到的问题，但有一件事我马上想到了，就是您让您的字段集显示：内联，然后尝试给它们一个宽度。内联元素不能有宽度。尝试显示：内联块或显示：块；浮动：左；相反此外，使用border:none可能会更好；代替边界：0px#戈登姆·奥普斯。。我在之前的一次迭代中也尝试过内联块，一定是错误地将其留在了css中？它似乎是有效的css3。我不想让现场设备浮动。这将打破我的布局的另一部分。@diEcho啊，我想我现在明白你的意思了。由于上级的决定，我不能做

*{margin/padding/border}

div div{}

这里只为小提琴而设-我的标记中没有它。@James，好吧..这就是我提到的原因..看我的小提琴..请始终准确地说出你这边所做的：）@diEcho Lol！。。。我所拥有的正是我房子大小的html乱七八糟的东西。但你是对的，我应该详细说明。谢谢。我猜除了使用float（或讨厌的49.8%技巧）之外，没有其他方法了。所以最好的答案！我的css中的错误？它似乎是有效的css3。我不想让现场设备浮动。这将打破我的布局的另一部分。@diEcho啊，我想我现在明白你的意思了。由于上级的决定，我不能做

*{margin/padding/border}

div div{}

这里只为小提琴而设-我的标记中没有它。@James，好吧..这就是我提到的原因..看我的小提琴..请始终准确地说出你这边所做的：）@diEcho Lol！。。。我所拥有的正是我房子大小的html乱七八糟的东西。但你是对的，我应该详细说明。谢谢。我猜除了使用float（或讨厌的49.8%技巧）之外，没有其他方法了。所以最好的答案！你说得对。不幸的是，在我的例子中，我不能很好地控制HTML。最后我得到了父div

overflow:hidden

和fieldset

float:left；
<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>