Indentation of <ul><li>

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>

Answer 1

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>