Question

如何使this正常工作，如下图所示：

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

我的意思是，我希望第二行li项左对齐第一行li项。 “第1项”很好，其他人应该对齐。（经评论修订）

desired result

Answer 1

删除width:11em;，他们只是不适合。

Answer 2

这是一个定义列表，因此请使用正确的<DL>元素（定义列表）而不是<UL>。然后，您可以在两行简短的CSS中完成您想要的所有内容。

http://jsfiddle.net/smclark89/tkUjc/

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

Answer 3

你的标记似乎完全正常，我不太确定为什么似乎有问题达到你想要的。这是非常简单的东西，除非我遗漏了一些东西：

http://jsfiddle.net/ryanwheale/UhQ9W/9/

我的解决方案将标签及其旁边的标签放在彼此旁边。由于你的外部元素是16em，我们使宽度等于16（注意，你也可以使用百分比）：

label:first-child {
    float: left;
    width: 7em; /* magic number: 9 + 7 = 16  (7 / 16 = 43.75%) */
}

label:first-child + * {
    float: left;
    width: 9em; /* magic number: 9 + 7 = 16 (9 / 16 = 56.25%) */
}

然后，对于“扁平”物品，我们只是将它们彼此相邻漂浮并给它们宽度为50％：

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

注意：如果您想为任何内容添加填充，我建议将box-sizing: border-box;添加到正在浮动的任何内容中。

此外，当事情开始扩展和包装时，浮点数可能会给你带来问题......所以有另一个inline-block的解决方案可以解决这个问题。让我知道这是如何工作的，如果你遇到真正的内容在那里没有正确排队的问题，我可以提供更好的解决方案。

Answer 4

移除浮动，display:inline（除非您希望它们显示在彼此旁边），然后使用text-align，然后使用list-style-position: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>

此外，您不应该使用内联CSS（style属性），这是不好的做法。

Without display:inline jsFiddle

With display:inline jsFiddle

Answer 5

对CSS文件进行轻微修改：

注释：
- 在每个奇数<li>之后使用清除将下一个<li>的开头设置为下一行的远端。
-adding float:left;到.flat设置第一个<li>与label内联。

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

示例 http://jsfiddle.net/UhQ9W/19/

Answer 6

这是一种方法，以防你也可以重构html。 See it on JSFiddle

<ul>
  <li><label>name:</label>
      <ul class="flat">
          <li>whatever</li>
      </ul></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>

ul {
    list-style: none;
    padding: 0;
}

label {
    display: inline-block;
    width: 4.5em;
}

.flat {
    display: inline-block;
    vertical-align: top;
    width: 6em;
    margin-bottom: .5em;
}

.flat li {
    display: inline-block;
}

Answer 7

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

这是更新的样式

.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%;
}

http://jsfiddle.net/QhSC9/

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

Answer 8

将padding-left: 7em;添加到.flat：fiddle

或者将float: left; width: 9em; padding: 0;添加到.flat：fiddle

Answer 9

在overflow: hidden

上使用ul

http://jsfiddle.net/HerrSerker/UhQ9W/8/

.flat {
    list-style:none; 
    overflow:hidden; 
    padding:0
}

overflow：hidden会更改.flat元素的块格式化上下文，如here所述

Answer 10

@ smclark89：同意，我会说<dl>似乎也更合适。我能想到的最干净的是this jsfiddle

Answer 11

检查一下。我知道这不是正确的方法，但根据其他答案你不能改变主要元素/标签也是样式。

Fiddle

<强> CSS

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

我刚刚添加了height:22px和clear:left来创建您想要的输出。

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

11 个答案:

Fiddle