CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Robert
Robert

Reputation: 812

li span is not aligned to the left

I have the following code and I can't to align the last li to the left. Here is my code

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

the code is look like in the following image:

enter image description here

So how I can align all prices to the left?

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

Upvotes: 0

Views: 232

Answers (2)

mickaelw
mickaelw

Reputation: 1513

You can fix a width to class attributelike this :

.attribute{
   width: 100px;
}

Upvotes: 0

Baz G
Baz G

Reputation: 164

You should really be using li for each item, rather then br's to split them. I imagine you might have a bit more luck with this base html / css : 

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>

Upvotes: 3

Related Questions