显示：列表的内联块

Question

我想创建一个看起来像这样的列表

Few Clouds
Humidity: 33%
Wind: 5.1 mph

但是，因为我使用JS来插入<li>元素，所以我必须预先编写列表的某些部分（不包括[JS]部分）：

[JS]
Humidity: [JS]%
Wind: [JS] mph

以下是解决此问题的代码：

<ul class="list-unstyled">
    <li class="clouds text-capitalize inline"> </li>
    <span class="inline">Humidity: </span><li class="wind inline"> </li><span class="inline">%</span>
    <span class="inline">Wind: </span><li class="humidity inline"> </li><span class="inline">mph</span>
 </ul>

和

.inline{
   display: inline-block;
}

但这导致（在javascript插入数据之后）

Few Clouds Humidity: 5.82 % Wind: 100mph

这是预期的，但我不知道如何修复它所以它看起来像我想要的第一个片段。忽略其他类，它们是我在javascript中访问它们的引导类和类。谢谢你的帮助。

Answer 1

UPDATE TST.INV SET DLI = ? FROM (SELECT Inv.PART, Inv.DLI FROM TST.INV Inv left join TST.LOCS L ON Inv.PART = L.LPART WHERE L.LPART IS NULL AND (IC != 'C') AND (I.PRICE < 1000) ) i WHERE PARTNO = i.PARTN 的仅 valid child为<ul>。您的<li>代码应该放在<span>代码中，而不是相反。我还建议在每个<li>中创建第二个<span>标记，以涵盖JavaScript组件。考虑<li>代码 inline by default ，<span>代码对将在同一行上彼此相邻显示。

这可以在以下内容中看到：

<span>

var elements = document.getElementsByClassName('javascript');

for (var i = 0; i < elements.length; i++) {
  elements[i].innerHTML = i;
}

请注意，如果您希望所有三个组件显示在同一行，您可以将<ul class="list-unstyled"> <li class="clouds text-capitalize inline"> <span class="inline">Humidity: </span> <span class="javascript"></span></li> <li class="wind inline"> <span class="inline">Wind %: </span> <span class="javascript"></span> </li> <li class="humidity inline"> <span class="inline">mph: </span> <span class="javascript"></span> </li> </ul>元素设置为<li>，其中包含：

display: inline-block

......虽然这基本上会破坏首先使用li { display: inline-block; } 元素的目的。

希望这有帮助！ ：）

Answer 2

您不需要带有html span标记的内联类。只需为每一行添加一个额外的li元素。

＆＃13;

＆＃13;

.list-unstyled {
  list-style: none;
}

＆＃13;

<ul class="list-unstyled">
	<li class="clouds text-capitalize">Few Clouds</li>
	<li>Humidity: <span class="wind">5.82</span>%</li>
	<li>Wind: <span class="humidity">100 </span>mph</li>
 </ul>

＆＃13;

＆＃13;

＆＃13;

View On Plunker