html - 在 a 的右侧添加附加文本列表

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>

每个功能都将出现在列表的左侧，但我现在希望在每个功能的右侧都有每个功能的描述。

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

是否可以通过将功能描述放在同一个列表中来做到这一点？

小提琴

Answer 1

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

演示

.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将使您的工作变得更加简单。trtd

Answer 2

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

  <style type="text/css">

    span{ padding-left:20px;}

    </style>

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