Question

正如你在jsfiddle中看到的那样，当没有换行时，布局看起来没问题。但是，如果窗口变小，并且<li>项开始换行，它们将换行于<dt>内容（这些词是一个，两个和三）。

我想要做的是在必要时进行<li>换行，但我希望它在自身下面开始新行，而不是完全向左开始。所以基本上，我试图让第一个列表项在第一个<dd>标记中包含所有行。

我如何在CSS中执行此操作？

HTML

<article>
    <header><h2>Title</h2></header>
    <dl>
      <dt>One</dt>
      <dd>
        <ul>
          <li>This is a relatively short sentence, not really long.</li>
          <li>This is a relatively short sentence, not really long.</li>
        </ul>
      </dd>
      <dt>Two</dt><dd>This is a relatively short sentence, not really long.</dd>
      <dt>Three</dt><dd>This is a relatively short sentence, not really long.</dd>
    </dl>
</article>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

dl {
    margin: 0 auto 5rem;
    max-width: 675px;
    font-size: 1.25rem; /* 16 x 1.25 = 20px */
    line-height: 1.6;
}

dt {
    font-style: italic;
    float: left;
    width: 7rem;
}

li {
    list-style-type: none;
    margin-left: 7rem;
}

li:first-of-type {
    margin-left: 0;
}

http://jsfiddle.net/E3QW2/1/

Answer 1

为overflow:hidden元素添加dd（以防止它们在浮动的dt下方流动），并移除li:first-child的边距：

http://jsfiddle.net/CBroe/E3QW2/3/

如何控制这些<li>项目的包装？</li>

1 个答案: