Question

我有一个包含几个li元素的主ul。我想把这些li元素放在ul中。不幸的是，我一直没能做到这一点。

此li元素还包含ul和更多li元素。我也试图将这些最终的li元素对齐。

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

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

em部分应该左对齐，其余部分应该是正确的。我只能做其中一个。

我缺少什么想法？

亲切的问候

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

当然它也适用于您的代码。只需仔细检查你做了什么：

＆＃13;

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

＆＃13;

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

＆＃13;

在UL中居中li元素，其中包含更多li元素，并左右对齐文本

1 个答案: