css - 将较高的 block 对齐到较短的 block 的右侧

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 项”很好，其他元素应与之对齐。 (根据评论修改)

Answer 1

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