个人中心
gpt4 book ai didi

javascript - 空文本节点和行内 block 布局

转载 作者：行者123 更新时间：2023-11-30 13:02:38 26 4
gpt4 key购买 nike

<分区>

使用以下标记

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

使用以下 CSS

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%;
}

请不要介意这只是为了证明问题有多糟糕。

你会期望会有 4 li在一行中，因为没有边距填充或边框占用它们可用的任何空间，并且每个大小都为父级的 25% ul .

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

我不喜欢在进行流体布局时 float 元素我喜欢使用 display: inline-block相反，空文本节点只是这个令人烦恼的问题。

现在我有一个解决方案，我使用的女巫是用 javascript 删除它们，你可以在这里或在 http://jsfiddle.net/Tt9zn/5/ 上查看。 

$(function() {
    function tirmSpecial(str) {
        // Trim \r Carriage Return, \n Linefeed, \t Tab, \v Vertical Tab, \f Form-Feed, \u0020 Space
        // Do Not Trim (u00A0 = &nbsp)
        return str.replace(/^[\r\n\t\v\f\u0020]+|[\r\n\t\v\f\u0020]+$/g, ''); 
    }

    function getTextNodesIn(node, includeWhitespaceNodes) {
        var textNodes = [], whitespace = /^\s*$/;

        function getTextNodes(node) {
            if (node.nodeType == 3) {
                if (includeWhitespaceNodes || !whitespace.test(node.nodeValue)) {
                    textNodes.push(node);
                }
            } else {
                for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                    getTextNodes(node.childNodes[i]);
                }
            }
        }
        getTextNodes(node);
        return textNodes;
    }

    function removeEmptyTextNodes() {
        var el, trimVal, nodeList = getTextNodesIn(document, true);

        if(Object.prototype.toString.call(nodeList) !== '[object Array]') { return; }

        while (el = nodeList.pop()) {
            trimVal = tirmSpecial(el.nodeValue);
            if (trimVal.length > 0) {
                el.nodeValue = trimVal;
                continue;
            }
            el.parentNode.removeChild(el);
        }
    }

    $("#remEmpty").click(removeEmptyTextNodes);
});

为了演示我所说的空文本节点的意思，请使用 IE 的开发人员窗口并在我使用 javascript 删除它们之前查看我的 Fiddle 中的代码。

现在我的解决方案到目前为止有效我测试了它但我讨厌我需要编辑整个 DOM 才能做到这一点我还在网上找到了一些其他解决方案有些甚至可能来自 stackoverflow 我只是不记得在哪里但是这些都是丑陋的黑客，就像我的一样，我将在下面发布它们。

请大家帮帮我，只需要有一个更好的解决方案。

有人建议将您的标记更改为此

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

这行得通，过一会儿它就变得可读了，但这有一个缺点，那就是团队中的每个人都记得做这个可怕的 hack，更不用说自动代码缩进完全被破坏了，这意味着每个人的工作效率都会降低。

另一个 CSS Hack 是做以下事情

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;
}

这也有效，但你必须记住在你使用它的任何地方应用和撤消字间距黑客如果你实际上在一个部分中有文本与其他需要此黑客的内联 block 元素，那么它会产生一些问题然后你会必须添加 <span></span>或其他包装元素，以便您可以逆转黑客攻击。

26 4 0
文章推荐： javascript - 具有奇数个顶点的 D3.js 树，未显示边
文章推荐： ios - 按下按钮时快速更改背景
文章推荐： c# - 使用 installshield 创建安装文件时 Windows 窗体的 Microsoft Access 数据库的位置
文章推荐： swift - 使用 mailCore2 发送电子邮件给出错误代码 = 30
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com