li 스팬이 왼쪽에 정렬되지 않았습니다.

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