JQuery插入的HTML与纯HTML的对齐方式不同

注：请参阅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方法（如before在某个按钮之前添加这段代码），结果对齐方式与直接将这些HTML代码放在按钮代码之前的对齐方式不同。我使用firefox webtools检查源代码和dom结构，但无法找出问题所在。有人能帮我吗？非常感谢！

---

PS：正如您可能注意到的，我使用的是推特引导HTML和CSS框架

我的意思是元素之间是否存在空格很重要。如果您有

…

它将以不同于

的方式呈现（注意元素之间的间距）。当人们“直接”将HTML放入HTML文件时，他们倾向于将空格放入其中（换行符等），但当它是JavaScript中的字符串时，人们倾向于忽略空格，有时这会导致呈现差异

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

这与以下内容相同：

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

ab

作为：

ab

以及：

a
B

这就不同了：

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

ab
我的意思是元素之间是否有空格很重要。如果您有
…
它将以不同于
的方式呈现（注意元素之间的间距）。当人们“直接”将HTML放入HTML文件时，他们倾向于将空格放入其中（换行符等），但当它是JavaScript中的字符串时，人们倾向于忽略空格，有时这会导致呈现差异

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

这与以下内容相同：

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

ab

作为：

ab

以及：

a
B

这就不同了：

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

ab
布兰登在回答这个问题时是对的。
我在用列表元素编写菜单时也遇到过类似的情况

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


一个
两个
三


添加
display:inline块时，上面的代码将在列表元素之间显示空格以列出css属性

很好地解释了问题，甚至提供了一些简单但有效的修复方法

也许这对将来的人有用：）
布兰登在回答这个问题时是对的。
我在用列表元素编写菜单时也遇到过类似的情况

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


一个
两个
三


添加
display:inline块时，上面的代码将在列表元素之间显示空格以列出css属性

很好地解释了问题，甚至提供了一些简单但有效的修复方法

也许它对将来的某个人有用：）
在html代码片段的结尾和结尾处留出一个空格，看看这是否会使对齐方式与之前使用
时的对齐方式相同。
你能发布添加html的jQuery代码片段吗？@TheManiac我已经添加了我的jQuery代码，函数createEmptyLanguagePart（）返回完全相同的HTML代码。@Brandon我不明白你的意思。但是我想补充一下，语言名称的标签对齐正确，而语言输入字段没有对齐。真奇怪（我的意思是，元素之间是否有空格很重要。如果有
..
，则呈现方式将不同于
..
（注意元素之间的空格）。当人们“直接”将HTML放入HTML文件时，他们倾向于在其中添加空格（换行符等），但当它是JavaScript中的字符串时，人们往往会忽略空白，有时这会导致呈现差异。在html代码段的结尾和结尾处留出一个空格，看看这是否会使对齐结果与您在使用之前的
时一致，您能发布添加html的jQuery代码段吗？@TheManiac I've添加了我的JQuery代码，函数createEmptyLanguagePart（）返回完全相同的HTML代码。@Brandon我不清楚你的意思。但我想补充一点，语言名称的标签对齐正确，而语言输入字段没有。真奇怪：（我的意思是，元素之间是否有空格很重要。如果有
..
，则呈现方式将不同于
..
（注意元素之间的空格）。当人们“直接”将HTML放入HTML文件时，他们倾向于在其中添加空格（换行符等），但当它是JavaScript中的字符串时，人们往往会忽略空白，有时这会导致呈现差异。