Выравнять Список (
  • Как можно выравнять input-ы, чтобы они были на одном уровне и не зависили от длинны текста label

    .div-detail-general {
      width: 50em;
      margin: 10px;
      border-left-width: 5px;
      border-left-color: #7ac943;
      border-left-style: solid;
    }
    
    .div-detail-general h3 {
      margin: 0 0 0 8px;
    }
    
    .list-content-page-detail {
      list-style: none;
    }
    
    .list-content-page-detail label {
      font-size: 0.8em;
      margin: 0 0 0 18px;
    }
    
    .list-content-page-detail li {}
    
    .label-search-list {}
    
    .input-list-detail {
      border-color: #8d9ab1;
      width: 32em;
      height: 2em;
      margin: 8px 2px;
    }
    <div class="div-detail-general">
      <h3>Заголовок</h3>
      <ul class="list-content-page-detail">
        <li>
          <label for="text1">Текст ок</label>
          <input type="text" class="input-list-detail" name="text1" id="text1">
        </li>
        <li>
          <label for="text2">Текст</label>
          <input type="search" class="input-list-detail label-search-list" name="text2" id="text2">
        </li>
        <li>
          <label for="text3">Текстик</label>
          <input type="search" class="input-list-detail" name="text3" id="text3">
        </li>
        <li>
          <label for="text4">Текст длинный</label>
          <input type="datetime-local" class="input-list-detail" name="text4" id="text4">
        </li>
      </ul>
    </div>


    Ответы (1 шт):

    Автор решения: RavenTheX

    Можно обернуть label в div и добавить ему min-widthпо самому длинному тексту

    .div-detail-general {
      width: 50em;
      margin: 10px;
      border-left-width: 5px;
      border-left-color: #7ac943;
      border-left-style: solid;
    }
    
    .div-detail-general h3 {
      margin: 0 0 0 8px;
    }
    
    .list-content-page-detail {
      list-style: none;
    }
    
    .list-content-page-detail li {
      display: flex;
      align-items: center;
    }
    
    .list-content-page-detail li div {
      min-width: 100px;
      margin-right: 10px;
    }
    
    .list-content-page-detail div label {
      font-size: 0.8em;
      margin: 0 0 0 18px;
    }
    
    
    .input-list-detail {
      border-color: #8d9ab1;
      width: 32em;
      height: 2em;
      margin: 8px 2px;
    }
    <div class="div-detail-general">
      <h3>Заголовок</h3>
      <ul class="list-content-page-detail">
        <li>
          <div>
            <label for="text1">Текст ок</label>
          </div>
          <input type="text" class="input-list-detail" name="text1" id="text1">
        </li>
        <li>
          <div>
            <label for="text2">Текст</label>
          </div>
          <input type="search" class="input-list-detail label-search-list" name="text2" id="text2">
        </li>
        <li>
          <div>
            <label for="text3">Текстик</label>
          </div>
          <input type="search" class="input-list-detail" name="text3" id="text3">
        </li>
        <li>
          <div>
            <label for="text4">Текст длинный</label>
          </div>
          <input type="datetime-local" class="input-list-detail" name="text4" id="text4">
        </li>
      </ul>
    </div>

    → Ссылка