Indentation of <ul><li>

user_11814543 0
Viewed 946

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

enter image description here

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

enter image description here

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

enter image description here

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>

css html
4 Answers

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>

user_53853810

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>

user_103231640

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>

user_116238480

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.

enter image description here

<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;
}
Admin1
Related