动态添加时列表项失去样式

Question

我正在使用最新版本的 Bootstrap 来设置我的大多数 HTML 元素的样式。

在我的一个页面上，我需要将列表项动态添加到我的 <ul></ul> 元素中。我正在使用jQuery 添加这些额外的列表项。我就是这样做的：

$('ul.test-items').append('<li class="available">Test Item</li><li class="available">Test Item</li>');');

在将新列表项添加到 ul 元素后，它似乎失去了该 <li></li> 项的样式，已添加的列表项正确显示。列表项的两侧都有填充，但添加时它们似乎彼此相邻添加，没有填充。添加新列表项后是否需要重新绘制 ul 元素，以便将其设置为 ul 元素的一部分？

添加 1 个列表项元素似乎效果很好，但是添加 2 个或更多您可以看到差异。

这是我当前的 HTML 标记：

<ul class="list-inline test-items">
     <li class="available">product colour 1</li>
     <li class="available">product colour 3</li>
</ul>

通过 jQuery 添加新的列表项后，它看起来像这样：

<ul class="list-inline test-items">
     <li class="available">product colour 1</li>
     <li class="available">product colour 3</li>
     <li class="available">Test Item</li>
     <li class="available">Test Item</li>
</ul>

当我通过在Chrome 中按F12 查看标记时，它看起来正确，只是显示不正确。我的猜测是它不是已经样式化的 ul 元素的一部分。

这是我的风格：

.test-items .available
{
    border: 2px solid #999;
}

Answer 1

列表项的两边都有内边距，但添加时它们似乎是相邻添加的，没有内边距

Padding 是元素的 inside —— 并且新添加的元素在其边框的 inside 内也有该填充。这不是问题。

元素之间的间距，仅来自元素标签之间的空白——因为li 显示为inline。

如果那就是你在这里想要的——那么你只需要自己在新添加的元素之间添加那个空格：

.append('<li class="available">Test Item</li> <li class="available">Test Item 2</li>');

https://jsfiddle.net/0s7n3907/4/