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

Question

我有一个包含多个 li 元素的主 ul。我想将这些 li 元素置于 ul 的中心。不幸的是，我一直无法做到这一点。

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

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

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

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

知道我遗漏了什么吗？

亲切的问候

Answer 1

对齐应用于旧的子元素。要将不同的元素与父元素的左右对齐，您可以使用 float:

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>

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

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

html

css

text-align

alignment