Question

我的代码是：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我的问题是如何才能将所有li元素的宽度相等？像行表的东西。正如您将在我的代码中看到的那样，某些数字与其后续元素没有垂直对齐。简而言之，所有数字都可以看起来像一行，大小相同。

Answer 1

如果你想要实现像行一样的表并垂直对齐跨度很容易，你可以尝试

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;
}

检查小提琴http://jsfiddle.net/4m4wqyog/ 希望它有所帮助：）

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

1 个答案: