html - 我如何控制这些的包装项目？

Question

正如您在 jsfiddle 中看到的那样，当没有换行时，布局看起来不错。但是，如果窗口变小，并且<li>项目开始环绕，它们会环绕在<dt>内容下方（即单词one、two和three）。

我想要做的是<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/