Css 将较高的块与较短块的右侧对齐

如何使工作如下图所示：

<ul style="width:16em;list-style:none;padding-left:0">
  <li><label>name:</label><span>whatever</span></li>
  <li><label>categories:</label>
    <ul class="flat"><li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
   </li>
</ul>

.flat {list-style:none}
.flat li {display:inline; padding-left:0}
label {float:left;width:7em;}

姓名：随便
类别：
第1项
项目2
项目3
项目4



.flat{列表样式：无}
.flat li{显示：内联；左填充：0}
标签{浮动：左；宽度：7em；}

我的意思是，我希望第二行的li项与第一行的li项左对齐。“项目1”很好，其他项目应按它对齐。（根据意见修订）

---

移除

宽度：11em

，它们就是不适合。

移除浮动，显示：inline（除非您希望它们彼此相邻显示），只需使用

文本对齐

，然后使用

列表样式位置：inside修复项目符号：

<ul style="width:13em; border:1px">
    <li><label style="text-align:left; width:7em">test</label>
        <ul style="text-align:right;list-style-position:inside;">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>
   </li>
</ul>


试验

项目1
项目2
项目3
项目4




此外，您不应该使用内联CSS（
style
attribute），这是一种糟糕的做法


对CSS文件的轻微修改：

注：

-在每一个奇数
后使用clear将下一行
的开头设置为下一行的远端。

-添加<代码>浮动：左

到

.flat

设置第一个

与

标签

内联

CSS

.flat {list-style:none;float:left;}
.flat li {display:inline; padding-left:0;}
label {float:left;width:7em;}
ul {padding:0px;}
li {float:left;}
ul .flat li:nth-child(odd) {clear:both;}

label {
    clear:left;
    float:left;
    width:7em;
    height:22px;
}

示例

---

这里有一种方法，以防您也可以重新构造html

姓名：

随便

类别：

项目1
项目2
项目3
项目4



保险商实验室{
列表样式：无；
填充：0；
}
标签{
显示：内联块；
宽度：4.5em；
}
.平坦{
显示：内联块；
垂直对齐：顶部；
宽度：6em；
边缘底部：.5em；
}
李平先生{
显示：内联块；
}

看看这个。我知道这不是正确的方法，但根据其他答案，您无法更改主要元素/标记以及样式

CSS

.flat {list-style:none;float:left;}
.flat li {display:inline; padding-left:0;}
label {float:left;width:7em;}
ul {padding:0px;}
li {float:left;}
ul .flat li:nth-child(odd) {clear:both;}

label {
    clear:left;
    float:left;
    width:7em;
    height:22px;
}

---

我刚刚添加了

height:22px

和

clear:left

，以创建所需的输出。

需要其他样式才能实现这一功能。切换到浮动并使用宽度的百分比可以正确对齐右侧的标签和内容

这是最新的款式

.flat {
    list-style:none;
    float: left;
    width: 64%;
    padding: 0;
    margin-left: -0.75em;
    overflow: hidden;
}
.flat li {
    float: left;
    width: 38%;
    padding-left: 0.75em;
}
label {
    float:left;
    width:35%;
}

---

如果您能够更新标记，我建议您查看dl

Add

padding left:7em至
.flat
：

或添加<代码>浮动：左；宽度：9em；填充：0至
.flat
：
在
ul上使用
溢出：隐藏


overflow:hidden更改了
.flat
元素的块格式上下文，如前所述
您的标记似乎完全正确，我不太清楚为什么在实现您的目标时会出现问题。这是非常简单的东西，除非我遗漏了什么：


我的解决方案将标签和它旁边的任何东西放在一起。由于外部元素为16em，我们将宽度设为16（注意，您也可以使用百分比）：

然后，对于“扁平”项目，我们只需将它们相邻浮动，并给它们50%的宽度：

.flat li {
    float: left; 
    width: 50%;
}

注意：如果你想给任何东西添加填充，我建议添加
box size:border-box指向任何正在浮动的对象

此外，当事情开始扩展和包装时，浮动可能会给您带来问题。。。因此，还有另一种解决方案，它使用
内联块
，可以解决这个问题。让我知道这是如何工作的，如果您遇到实际内容出现后无法正确排列的问题，我可以提供更好的解决方案。
我已将列表项设置为浮动，并每三次清除一次浮动的元素，以便创建上面附加的布局。
请记住，这个演示是宽度不可知的。所有的技巧都在这一行代码中

.flat li:nth-of-type(3n) {
    background:#ff0000;
    clear:left;
}

这是一个定义列表，因此请使用适当的
元素（定义列表）而不是
。然后，您可以在两行CSS中完成您想要的一切


@smclark89：同意，我认为
在这里似乎也更合适。我能想到的最干净的方法是
No can do，我想要它是因为它与样本中不存在的其他项目对齐；这将允许它有足够的空间来容纳。我的意思是，你看到的列表之外还有其他li/标签，我对它们都使用标准宽度。如果我们可以看到整个页面，我们可以做出更好的评论。这不起作用，它会将ul发送到第二行。这是一篇很好的帖子，解释了定位
的不同方式。（我删除了你代码中的
float
，谢谢，但只有当列表可以放在第一行时，这才有效。如果我减少外部ul的宽度，它会作为一个整体落在第二行。我不确定你想实现什么，或者为什么这会是一个问题。也许你可以完全删除
ul
宽度。我想实现e除第3项和第4项外，修订内容由第1项和第2项左对齐（不进入S结束行）。我无法删除ul，因为它是页面中的一个框，不应该更宽。我找到了一个“解决方案”这里：我使用的是div/span而不是ul/li。这并不理想，我也不明白为什么相同的样式不能用于ul/li。你说的“重组”是什么意思？你在第一个标签后面加了一个“ul.flat”，但是
.flat li:nth-of-type(3n) {
    background:#ff0000;
    clear:left;
}

<dl>
<dt>name:</dt>
<dd>
    <ul>
        <li>Whatever</li>
    </ul>
</dd>
<dt>categories:</dt>
<dd>
    <ul>
        <li><span>item 1</span></li>
        <li><span>item 2</span></li>
        <li><span>item 3</span></li>
        <li><span>item 4</span></li>
    </ul>
</dd>

dt { float:left; }
dd li { list-style-type:none; }