如何在包裹在 li 元素上的 span 元素中放置相同的宽度

Question

我的代码是：

.qty{
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 10px;
position: relative;
bottom: 20px;
background-color: #137EC4;}
.num {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 10px;
position: relative;
bottom: 3px;
background-color: #137EC4;
}

<li>
    <span>x<span>
    <a>
    <span>Name one</span>
    <span class="num" >0.8</span>
    <span class="qty" >2</span>
    </a>
</li>
<li>
    <span>x<span>
    <a>
    <span>Name long</span>
    <span class="num" >9.99</span>
    <span class="qty" >2</span>
    </a>
</li>
      <li>
    <span>x<span>
    <a>
    <span>Name three name</span>
    <span class="num" >104.5</span>
    <span class="qty" >3</span>
    </a>
</li>

我的问题是如何让所有 li 元素的宽度相等？类似于带行的 table。正如您将在我的代码中看到的那样，一些数字与其后跟的元素没有垂直对齐。简而言之，所有数字都可以看成一行，大小相同。

Answer 1

如果您想实现类似 table 的行并垂直对齐跨度很容易，您可以尝试

HTML

<li>
    <span> Number 1 </span>
    <span class='qty'> 2.5 </span>
    <span class='num'> 1 </span>
</li>
<li>
    <span> Number 2 </span>
    <span class='qty'> 5.0 </span>
    <span class='num'> 2 </span>
</li>

CSS

li {
    width: 250px;
    height: 35px;
}

span.qty, span.num {
    float:right; 
    padding: 2px 1px;
    border-radius: 5px;
    background-color: #0088cc;
    color: white;
    margin: 0 1px;
}

勾选fiddlehttp://jsfiddle.net/4m4wqyog/ 希望对您有所帮助:)

如何在包裹在 li 元素上的 span 元素中放置相同的宽度

How can I put same width in span element wrapped on li elements

html

css

size

jquery

alignment