Center li elements with more li elements in it within an UL and allign text left and right

Question

I have the following setup: JSFiddle example

I have a main ul that contains several li elements. I want to center these li elements within the ul. Unfortunatly I havent been able to do this have been struggeling with it.

This li element also contains an ul and again more li elements. I am also trying to allign these final li elements.

The markup of this element is like this:

<li><em>Order ID </em>1304129149</li>

The em part should be aligned left and the rest should be right. I can only do one of the two.

Any ideas what I am missing?

Kind regards

Answer 1

Alignment is applied to old child elements. To align different elements to left and right of parent you can use float:

ul {
  list-style: none;
}
li {
  width: 400px;
  text-align: right;
}
li em {
  float: left;
}

<ul>
  <li><em>Order ID </em>1304129149</li>
</ul>

UPDATE:

Of course it can works in your code too. Just carefully check what you do:

#content {
    min-width: 100%;
    padding: 15px;
    margin: 0 auto;
}

.details-table > li {
background-color: #FFFFFF;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 0 10px rgba(0,0,0,.15);
outline: 1px solid transparent;
float: left;
margin: 0 20px 20px 0;
    list-style-type: none;
}

.details-table-header {
height: auto;
text-align: center;
color: #fff;
background-color: #ff1a00;
}

.details-table-data {
    list-style-type: none;   
    padding-left: 0;
}
.details-table-data li {
    text-align: right;   
    padding: 4px;
}

em {
    float: left;
}

<div id="content">			
			<ul class="details-table">
                <li>
                    <header class="details-table-header"><h2>Algemeen</h2></header>
                    
                    <div class="details-table-body">
                        <ul class="details-table-data">
                            <li><em>Bestelling ID</em>8</li>
                            <li><em>Winkel</em>eFor</li>
                            <li><em>Order ID </em>1304129149</li>
                        </ul>
                    </div>
                </li>
                
                <li>
                    <header class="details-table-header"><h2>Algemeen</h2></header>
                    
                    <div class="details-table-body">
                        <ul class="details-table-data">
                            <li><em>Bestelling ID</em>38</li>
                            <li><em>Winkel</em>eFor</li>
                            <li><em>Order ID </em>130413429149</li>
                        </ul>
                    </div>
                </li>
    </ul>
</div>