li span未对齐左侧

Question

我有以下代码，我不能将最后一个li对齐到左边。这是我的代码

<ul class="product-options-lists">
<li class="option">
<span class="attribute">10g</span>
<span class="price">€9.60</span>
<br>
<span class="attribute">25g</span>
<span class="price">€17.40</span>
<br>
<span class="attribute">100g</span>
<span class="price">€43.80</span>
<br>
</li>
</ul>

代码如下图所示：

那么我如何将所有价格调整到左边？

CSS：

.product-options-lists .price {margin-left: 45%; width: 45%;}
.product-options-list-name {
width: 100%; background: rgba(68, 159, 64, 0.3) none repeat scroll 0 0;
list-style: outside none none;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
    font-size: 16px;
    line-height: 15px;
    font-weight: bold;
padding: 10px 15px;;
}

.product-options-lists .option {width: 100%;}
.product-options-lists .option .attribute {width: 150px;}

Answer 1

你应该为每个项目使用li，而不是将它们分开。 我想你可能会对这个基础html / css运气好一点：

＆＃13;

＆＃13;

li{

    text-align : left;
    list-style: none;
  }
  
  li span
  {
    display : inline-block;
    width : 150px;
  }

＆＃13;

<ul class="product-options-lists">
<li class="option">
<span class="attribute">10g</span>
<span class="price">€9.60</span>
</li>
<li>
<span class="attribute">25g</span>
<span class="price">€17.40</span>
</li>
<li>
<span class="attribute">100g</span>
<span class="price">€43.80</span>
</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将宽度固定为类attribute，如下所示：

.attribute{
   width: 100px;
}