html - 如何控制这些 <li> 元素的换行？

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元素(防止它们在 float 的 dt 下方流动)，并删除 li:first-child 的边距。 :

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