Indentation of

Question

I have a list of items and it will take up two lines or more.

When it gets longer than the width of the div, it wraps to the next line like the example below.

How can I make the second line to start in alignment with Item1 and can be done responsively?

ul li {
  display: inline-block;
}

<ul>
  <li><strong>List of items:</strong></li>
  <li><a href="#">Item1</a></li>
  <li><a href="#">Item2</a></li>
  <li><a href="#">Item3</a></li>
  <li><a href="#">Item4</a></li>
  <li><a href="#">Item5</a></li>
  <li><a href="#">Item6</a></li>
  <li><a href="#">Item7</a></li>
</ul>

I doubt it will be possible unless you use some width calculation and render it or make it so that it will always have fixed number of items or simply use a table and move out Title in one column and data in another. — Dipen Shah, Mar 02 '20 at 03:02
I think you'll find the problem easier (and the solution more semantic) if you move `List of items:` outside the list. — stealththeninja, Mar 02 '20 at 03:03
You can use 2 div, one for first li, and the next for all other items. Then you can set width and they will adjust in related div. — Nasser Ali Karimi, Mar 02 '20 at 03:04
Semantically your first "list item" is a title and not part of the list. That should be a separate element altogether and would solve the issue. — Rob, Mar 02 '20 at 03:09
Just use a ``. First cell would be the text "Line of items." Second will be the list items. — AskYous, Mar 02 '20 at 03:20

ksav · Accepted Answer · 2020-03-02T03:21:51.297

It seems that the title of your unordered list is List of items. Semantically speaking, it should be moved into a heading element outside of the unordered list itself.

Then you can use flexbox on a wrapper element to vertically align its child elements (the heading and the unordered list).

.wrapper {
  display: flex;
  align-items: flex-start;
}

ul li {
  display: inline-block;
  margin-right: 0.5em;
}

h2, li {font-size: 16px}

h2 {flex-shrink: 0;}

h2, ul {margin: 0;}

ul {padding-left: 0.5em;}

<div class="wrapper">
  <h2>List of items:</h2>
  <ul>
    <li><a href="#">Item1</a></li><li><a href="#">Item2</a></li><li><a href="#">Item3</a></li><li><a href="#">Item4</a></li><li><a href="#">Item5</a></li><li><a href="#">Item6</a></li><li><a href="#">Item7</a></li><li><a href="#">Item8</a></li><li><a href="#">Item9</a></li><li><a href="#">Item10</a></li><li><a href="#">Item11</a></li><li><a href="#">Item12</a></li><li><a href="#">Item13</a></li>
  </ul>
</div>

score 1 · Answer 2 · answered Mar 02 '20 at 03:03

1

If the text in first li doesn't change this can be done with negative text indent and padding.

ul {
  text-indent: -94px;
  padding-left: 94px;
}

ul li{
  text-indent: 0;
  display:inline-block;
}

<ul>
  <li><strong>List of items:</strong></li>
  <li><a href="#">Item1</a></li>
  <li><a href="#">Item2</a></li>
  <li><a href="#">Item3</a></li>
  <li><a href="#">Item4</a></li>
  <li><a href="#">Item5</a></li>
  <li><a href="#">Item6</a></li>
  <li><a href="#">Item7</a></li>
</ul>

answered Mar 02 '20 at 03:03

Chris Li

2,628
1
8
23

3

`If the text in first li doesn't change` this is a very shaky assumption. What about a different font family, i18n (internationalization)? – stealththeninja Mar 02 '20 at 03:11
@ChrisLi Thanks but the length of word is not fixed in my case. – Organic Heart Mar 02 '20 at 03:53

score 0 · Answer 3 · answered Mar 02 '20 at 03:09

I hope this answers your query.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.conteiner p {
  margin-left: 10px;
}

ul>li {
  display: inline-block;
}

<div class="container">
  <p><strong>List of items:</strong></p>
  <ul>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
    <li><a href="#">Item3</a></li>
    <li><a href="#">Item4</a></li>
    <li><a href="#">Item5</a></li>
    <li><a href="#">Item6</a></li>
    <li><a href="#">Item7</a></li>
    <li><a href="#">Item8</a></li>
    <li><a href="#">Item5</a></li>
    <li><a href="#">Item6</a></li>
    <li><a href="#">Item7</a></li>
    <li><a href="#">Item8</a></li>
  </ul>
</div>

score 0 · Answer 4 · answered Mar 02 '20 at 03:55

The text "List of items" is not contextually the content of your unordered list. Semantically, if you want a cleaner HTML, I would not recommend your approach.

I recommend, simply, to keep the ul to list the content that must be listed, nothing else: no title or introduction.

<div id="my-ul">
  <p>List of items:</p>

  <ul>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
  </ul>
</div>

#my-ul {
  display: flex;
}

#my-ul p {
  width: 200px;
}

#my-ul ul {
  list-style: none;
  padding: 0;
}

#my-ul ul li {
  display: inline;
}

Indentation of

4 Answers4