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>

当我在F12中按Chrome查看标记时，它看起来是正确的，它只是没有正确显示。我的猜测是它不是已经风格的ul元素的一部分。

这是我的风格：

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

Answer 1

列表项在它们的两边都有填充，但添加时它们似乎是彼此相邻添加的，没有填充

填充里面元素 - 新添加的元素也在其边框内填充。这不是问题。

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

如果那是你在这里之后的东西 - 那么你只需要自己在新添加的元素之间添加这个空格：

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

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

列表项在动态添加时会丢失样式

1 个答案: