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

あなたが実際にそれらを分割するために、BRのではなく、その後、各項目のリチウムを使用する必要があります。あなたはこのようなクラスattributeに幅を修正することができます

li{ 
 

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

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

Answer 2

： 私はあなたがこのベースHTML/CSSでもう少し運を持っているかもしれないと想像

.attribute{ 
    width: 100px; 
}