CODEWITHSUNDEEP
htmlcss
user1694077
user1694077

Reputation:

How do I control the wrapping of these <li> items?

As you can see in the jsfiddle, the layout looks ok when there are no lines wrapping. However, if the window gets smaller, and the <li> items start wrapping, they wrap underneath the <dt> content (which are the words one, two and three).

What I'm trying to do is have the <li> wrap when necessary, but I want it to start the new line underneath itself, and not completely to the left. So basically, I'm trying to get all lines to wrap like the second list-item does in the first <dd> tag.

How do I do that in 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/

Upvotes: 2

Views: 116

Answers (1)

C3roe
C3roe

Reputation: 96316

Add overflow:hidden for your dd elements (that keeps them from flowing underneath the floated dt), and remove the margin for li:first-child:

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

Upvotes: 5

Related Questions