Gaurav Gaurav -4 years ago 93
CSS Question

li items spanning more than one line are not aligned properly in css

I have a list in which I have few elements

<style>

.passengerBaggageList > ul li:first-child{
list-style-type: none!important;
list-style-position: inherit;
padding : 0!important;
width : 246.1pt;
}

.passengerBaggageList > ul li:not(first-child){
list-style : disc inside;
width : 178pt;
}

.passengerBaggageList ul:not(:first-child){
margin: 13pt 0 0 0;
}

.extraLuggageCost{
margin-right: 16pt;
}
</style>


<div class="passengerBaggageList">
<ul class="passengersLuggageList">
<li>Mr.John Doe</li>
<li>1 checked baggage</li>
<li>1 extra checked baggage<span class="extraLuggageCost"> EUR 20</span>
</li>
</ul>
<ul class="passengersLuggageList">
<li>Mrs. Bea Doe</li>
<li>1 checked baggage</li>
<li>1 extra checked baggage</li>
</ul>
</div>


When the third li element contains more than one line or exceeds specified width, the content is not aligned, it should be exaclty below the above line. Also I need to put the span of extraCost class to the extreme right, which is not happening. Kindly help. Thanks

Answer Source

In order for the lists to stay aligned, you have to use list-style-position:outside, which will move the bullet points out of the element. In your example, I put it in list-style : disc outside;

Here's a Fiddle: https://jsfiddle.net/8ew8cn6o/

Edit: Out of element, not the parent element

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download