在 UP 中将 li 元素与更多 li 元素居中并左右对齐文本

Question

我有以下设置： JSFiddle example

我有一个包含几个 li 元素的主 ul。我想将这些 li 元素集中在 ul 中。不幸的是我一直无法做到这一点。

这个 li 元素还包含一个 ul 和更多的 li 元素。我也在尝试对齐这些最后的 li 元素。

这个元素的标记是这样的：

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

em 部分应左对齐，其余部分应右对齐。我只能做两者之一。

任何想法我错过了什么？

亲切的问候

Answer 1

对齐应用于旧的子元素。要将不同的元素对齐到父元素的左侧和右侧，您可以使用浮动：

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

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

更新：

当然，它也可以在您的代码中使用。请仔细检查您的操作：

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