0

注意：请参阅 Brandson 的以下评论，这是正确的答案。

我有一个简单的表格，允许用户输入多种语言（英语、法语、西班牙语等）及其相应的级别（如招聘网站）。每种语言及其级别都由以下代码表示：

<div class="form-inline" style="position: relative; left: 105px; padding-top: 20px;">
        <label>Language&nbsp;<span>*</span></label>
        <input type="text" name="languages[]" class="input-medium" style="margin-left: 16px;" value="french" readonly>
        <label style="padding-left: 107px; padding-right: 15px">Level&nbsp;<span>*</span></label>
        <select>
            <option>beginner</option>
            <option>intermediate</option>
            <option>fluent</option>
            <option>bilingual</option>
        </select>
</div>

JQuery 代码如下：

 $("#language_add_btn").click(function () {
            $("#language_add_btn").before(createEmptyLanguagePart());
        });

如果我像以前一样使用 jQuery 方法将这段代码添加到某个按钮之前，结果对齐方式与我直接将这些 HTML 代码放在按钮代码之前的结果对齐方式不同。我使用firefox webtools检查源代码和 dom 结构，但无法找出问题所在。谁能帮我 ？非常感谢 ！PS：你可能注意到了，我使用的是Tweeter Bootstrap HTML&CSS 框架。

4

2 回答 2

3

我的意思是元素之间是否存在空格很重要。如果你有<label>...</label><input />它会呈现不同的<label>...</label> <input />（注意元素之间的空间）。当人们“直接”将 HTML 放入您的 HTML 文件时，他们往往会在其中放入空格（换行符等），但当它是 JavaScript 中的字符串时，人们往往会忽略空格，有时这会导致呈现差异。

是的，HTML 文件中的空格也会影响渲染。请记住，这不是空格的数量。这是空白的存在：

这与以下内容相同：

<span>a</span> <span>b</span>

作为：

<span>a</span>      <span>b</span>

和：

<span>a</span>
<span>b</span>

这呈现不同：

<span>a</span><span>b</span>
于 2013-04-12T21:30:12.520 回答
1

布兰登在他的回答中对这个案例是正确的。在使用列表元素编写菜单时，我遇到过几次类似的情况。

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

display:inline-block;当添加到列表 css 属性时，上面的代码将在列表元素之间呈现空格。

这篇文章很好地解释了这个问题，甚至提供了一些简单但有效的修复。

也许将来对某人有用:)

于 2013-04-12T21:41:20.917 回答