在<ul>列表</ul>的右侧添加其他文本

Question

我有一个列表，我将使用产品规格表。这是我到目前为止的代码：

<div class="productspec">

<ul>
<li>Product Description</li>
<li>Device Type</li>
<li>Bundled Services</li>
<li>Form Factor</li>    
<li>Processor</li>
<li>RAM</li>
<li>Hard Drive</li>
<li>Data Link Protocol</li>    
<li>Power</li>
<li>Dimensions (WxDxH)</li>
<li>Manufacturer Warranty</li>
<li>Bundled with</li>    
</ul>

</div>

每个功能都会显示在列表的左侧，但我现在想要在每个功能的右侧显示每个功能的说明。

这就是我想要它的样子，但我无法找出最好的方法

是否可以通过将功能描述放在同一列表中来实现？

Fiddle

Answer 1

您应该在span元素中使用嵌套的多个li标记，并将display: inline-block;分配给span标记并指定一些固定的width

Demo

.productspec {
    border-style:solid;
    border-width:1px;
    border-color:#CCC;
}

.productspec li:nth-child(even) {
    background-color: rgb(245,245,245);
}

.productspec li {
    text-indent:10px;
    line-height:30px;
    list-style:none;
}

ul li span {
    display: inline-block;
}

ul li span:nth-of-type(1) {
    width: 250px;
}

---

此外，我想说使用table表格数据并没有错，这似乎就像表格式数据一样，使用table，tr和{{1}将使你的工作变得更加简单。

Answer 2

在样式表上根据您的要求添加填充

  <style type="text/css">

    span{ padding-left:20px;}

    </style>

    <ul>
    <li><span> Product Description</span>   <span>Product Description2</span></li>
    </ul>