Javascript 空文本节点&；内联块布局

使用以下标记

<ul>
    <li>
        <label class="field">
            Some Stuff 1
        </label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 2</label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 3</label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 4</label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 5</label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 6</label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 7</label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 8</label>
        <input class="value" type="text" />
    </li>
</ul>

请不要介意这有多可怕，这只是为了证明问题。

您可能希望一行中有4个

li

，因为没有边距填充或边框来占用它们可用的任何空间，并且每个都大小为父

ul

的25%

但因为我们都喜欢让标记可读，而不仅仅是在一行中，所以我们添加了额外的分隔符和制表符/空格来缩进等等。。。但这最终在DOM中成为空文本节点，这些当然是完全自然的，应该存在，但由于它们占用空间4px，因此它们破坏了使用内联块的良好流动布局

在进行流体布局时，我不喜欢浮动元素，我喜欢使用

display:inline块

，而只是空文本节点有一个烦人的问题

现在我有一个解决方案，我使用巫婆是删除它们与javascript你可以检查它在这里或在

---

这同样有效，但是你必须记住在你使用的任何地方都要应用和撤销单词间距破解。这也会产生一些问题，如果你的一个部分中有文本，而其他内联块元素需要这种破解，那么你就必须添加一个

或其他包装元素，这样你就可以逆转破解了。

这里有一个相当不错的例子简单修复：

ul {
    list-style: none;
    margin-left: 4px;
    width: 100%;
}

ul > li {
    display: inline-block;
    margin-left: -4px;
    padding: 3px 8px;
    width: 25%;
}

不需要JavaScript

编辑：

FWIW，我认为你最好接受这样一个事实，浮动

li

元素是实现你想要的最简单的方法：

ul {
    clear: both;
    list-style: none;
    width: 100%;
}

ul > li {
    float: left;
    padding: 3px 8px;
    width: 25%;
}

---

这适用于Chrome、FF、Safari、Opera和IE 8+。它在IE 7中失败了，但我相信这是因为IE 7不支持框大小调整。

有一个非常好的跨浏览器解决方案，我在下面的代码中对其进行了调整：

html，正文{
宽度：100%；
}
* {
保证金：0；
填充：0；
边界：0；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
输入{
边框：1px实心；
}
保险商实验室{
列表样式：无；
宽度：100%；
}
ul>li{
显示：内联块；
宽度：25%；
填充：3px8px；
}
领域
.价值{
显示：块；
宽度：100%；
}
保险商实验室{
显示：表；/*Webkit修复程序*/
宽度：100%；/*设置宽度以阻止FF包裹li*/
文本对齐：居中；/*居中列表项*/
字间距：-.25em；/*在所有现代浏览器中隐藏空白节点（不适用于webkit）*/
保证金：0；
填充：.25em0；
列表样式：无；
}
ulli{
显示：-moz内联框；/*FF2和K-Meleon*/
显示：内联块；
垂直对齐：底部对齐；
字间距：0；/*从父ul重置*/
/*边距：0.25em；/*现在您可以设置边距，而不会产生节点冲突*/
填充：0.5em；
}
*html ul li{display:inline；}/*IE6*/
*+html ul li{display:inline；}/*IE7*/


一些东西1


一些东西2


一些东西3


一些东西4


一些东西5


一些东西


一些东西7


一些东西8

lable

需要更改为

label

。Lol现在会改变这一点是的

flexbox

是解决我所有问题的圣杯，但是现在几乎没有人支持它，如果我告诉他我们只能使用Chrome，老板会发疯的。其他解决方案都有自己的小怪癖，但感谢您提供有用的信息，即使我找不到完美的解决方案，这与

字母间距：-4px基本相同；字距：-4px<ul
    ><li
        ><label class="field">Some Stuff 1</label
        ><input class="value" type="text"
    /></li
    ><li
        ><label class="field">Some Stuff 2</label
        ><input class="value" type="text"
    /></li
    ><li
        ><label class="field">Some Stuff 3</label
        ><input class="value" type="text"
    /></li
    ><li
        ><label class="field">Some Stuff 4</label
        ><input class="value" type="text"
    /></li
    ><li
        ><label class="field">Some Stuff 5</label
        ><input class="value" type="text"
    /></li
    ><li
        ><label class="field">Some Stuff 6</label
        ><input class="value" type="text"
    /></li
    ><li
        ><label class="field">Some Stuff 7</label
        ><input class="value" type="text"
    /></li
    ><li
        ><label class="field">Some Stuff 8</label
        ><input class="value" type="text"
    /></li
></ul>

ul {
    list-style: none;
    width: 100%;

    /* Hack to keep "Text - Empty Text Node" elements from taking up space. */
    letter-spacing: -4px;
    word-spacing: -4px;
}

ul > li {
    display: inline-block;
    width: 25%;

    padding: 3px 8px;

    /* Reverse the Needed Hack to keep "Text - Empty Text Node" elements from taking up space. */
    letter-spacing: normal;
    word-spacing: normal;
}

ul {
    list-style: none;
    margin-left: 4px;
    width: 100%;
}

ul > li {
    display: inline-block;
    margin-left: -4px;
    padding: 3px 8px;
    width: 25%;
}

ul {
    clear: both;
    list-style: none;
    width: 100%;
}

ul > li {
    float: left;
    padding: 3px 8px;
    width: 25%;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

html, body {
    width: 100%;
}

* {
    margin: 0;
    padding: 0;
    border: 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input {
    border: 1px solid;
}

ul {
    list-style: none;
    width: 100%;
}

ul > li {
    display: inline-block;
    width: 25%;

    padding: 3px 8px;
}

.field,
.value {
    display: block;
    width: 100%;
}

ul {
    display:table;/* Webkit Fix */
    width:100%;/* set width to stop FF from wrapping li's*/
    text-align:center; /* center list items*/   
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    margin:0;
    padding:.25em 0;
    list-style:none;
}

ul li {
    display:-moz-inline-box; /* FF2 and K-Meleon */
    display:inline-block;
    vertical-align:bottom; 
    word-spacing:0; /* reset from parent ul*/
    /*margin:0 .25em; /*now you can set side margins without node conflict */
    padding:0 .5em;
}

* html ul li { display:inline;} /*IE6*/
*+html ul li { display:inline;} /*IE7*/

</style>

</head>
<body>

<ul>
    <li>
        <label class="field">
            Some Stuff 1
        </label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 2</label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 3</label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 4</label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 5</label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 6</label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 7</label>
        <input class="value" type="text" />
    </li>
    <li>
        <label class="field">Some Stuff 8</label>
        <input class="value" type="text" />
    </li>
</ul>

</body>
</html>