Выровняйте заголовок по левому краю с полями ввода flexbox

Question

Мне было интересно, есть ли лучший способ (более динамичный c) способ выравнивания заголовка слева с полями ввода под ним, используя flexbox. Поля ввода должны отображаться в строке с заголовком над ними. В настоящее время я должен был обернуть div вокруг полей заголовка и ввода и установить фиксированную ширину пикселя. Есть ли лучший способ добиться того же результата с помощью flexbox?

Я пытался использовать inline-flex на этой оболочке, но он все еще лечит ее как элемент полной ширины вместо того, чтобы быть столь же широким как его содержание. Я также попытался установить inline-flex в неупорядоченном списке, и результат точно такой же.

Я бы не хотел устанавливать фиксированную ширину пикселя. В следующий раз, если мне нужно будет сделать то же самое, но с другим элементом, мне нужно будет установить фиксированный размер пикселя, который не идеален.

Заранее спасибо

html {
  font-size: 14px;
}

.section {
  padding: 1.5rem;
}

.wrapper {
  display: flex;
  background: lightblue;
}

.warning-percentage-wrapper {
  background: lightcoral;
  flex: 0 0 30%;
}

.warning-percentage {
  display: inline-flex;
  margin-left: -1rem;
}

.warning-percentage li {
  flex: 0 1 80px;
  margin-left: 1rem;
}

.days-of-week-wrapper {
  background: lightseagreen;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.inline-wrapper {
  background: pink;
  display: flex;
  flex-direction: column;
  flex: 0 1 644px;
}

.days-of-week {
  display: inline-flex;
  margin-left: -1rem;
}

.days-of-week li {
  flex: 0 1 80px;
  margin-left: 1rem;
}

<section class="section">

  <div class="wrapper">

    <div class="warning-percentage-wrapper">
      <h5 class="title is-5">Warning Percentages</h5>
      <ul class="warning-percentage">
        <li>
          <label class="label">Low</label>
          <input class="input" type="text" readonly>
        </li>
        <li>
          <label class="label">Medium</label>
          <input class="input" type="text" readonly>
        </li>
        <li>
          <label class="label">High</label>
          <input class="input" type="text" readonly>
        </li>
      </ul>
    </div>

    <div class="days-of-week-wrapper">
      <div class="inline-wrapper">
        <h5 class="title is-5">Days of Week</h5>
        <ul class="days-of-week">
          <li>
            <label class="label">Monday</label>
            <input class="input" type="text" readonly>
          </li>
          <li>
            <label class="label">Tuesday</label>
            <input class="input" type="text" readonly>
          </li>
          <li>
            <label class="label">Wednesday</label>
            <input class="input" type="text" readonly>
          </li>
          <li>
            <label class="label">Thursday</label>
            <input class="input" type="text" readonly>
          </li>
          <li>
            <label class="label">Friday</label>
            <input class="input" type="text" readonly>
          </li>
          <li>
            <label class="label">Saturday</label>
            <input class="input" type="text" readonly>
          </li>
          <li>
            <label class="label">Sunday</label>
            <input class="input" type="text" readonly>
          </li>
        </ul>
      </div>
    </div>

  </div>
</section>

Answer 1

Проблема, с которой я сталкиваюсь с inline-flex, вызвана использованием flex-основы со значением пикселя. Мне нужно, чтобы все входы были одинаковой ширины. Я забыл упомянуть, что использую Bulma (не по выбору), который по умолчанию удаляет все поля и отступы из элементов.

Мой пример, приведенный ниже, должен дать лучшее понимание проблемы. Обратите внимание, что я установил UL - «дни недели» для выровненного себя. Теперь UL настолько широк, что его содержание - то, что я хотел. Тем не менее, если вы наведите курсор мыши на элемент с помощью инструментов разработки, остается еще немного свободного места. Это потому, что я использую гибкую основу со значением пикселя. Если вы установите LI для flex: 1 и осмотрите DOM, элементы будут хорошо заполнять пространство, включая поля.

Решением для этого является полное удаление стилей flex на элементах LI и установка фиксированная ширина пикселя для элемента inline-wrapper. Я не думаю, что это идеально, но это позволяет вам контролировать размер LI, не требуя дополнительного стиля css на самих LI.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="bulma-0.8.0/css/bulma.min.css" rel="stylesheet" />

    <style>

        html {
            font-size: 14px;
        }

        .section {
            padding: 1.5rem;
        }


        .wrapper {
            display: flex;
            background: lightblue;
        }

        .warning-percentage-wrapper {
            background: lightcoral;
            flex: 0 0 30%;
        }

        .warning-percentage {
            display: inline-flex;
            margin-left: -1rem;
        }

        .warning-percentage li {
            flex: 0 1 80px;
            margin-left: 1rem;
        }


        .days-of-week-wrapper {
            background: lightseagreen;
            flex: 1;
            display: flex;
            justify-content: flex-end;
        }

        .inline-wrapper {
            background: pink;
            display: flex;
            flex-direction: column;
            flex: 0 1 644px;
        }

        .days-of-week {
            display: inline-flex;
            align-self: flex-start;
        }

        .days-of-week li {
            flex: 0 1 80px;
            margin-left: 1rem;
        }

        .days-of-week li:first-child {
            margin-left: 0;
        }

    </style>

</head>
<body>

    <section class="section">

        <div class="wrapper">

            <div class="warning-percentage-wrapper">
                <h5 class="title is-5">Warning Percentages</h5>
                <ul class="warning-percentage">
                    <li>
                        <label class="label">Low</label>
                        <input class="input" type="text" readonly>
                    </li>
                    <li>
                        <label class="label">Medium</label>
                        <input class="input" type="text" readonly>
                    </li>
                    <li>
                        <label class="label">High</label>
                        <input class="input" type="text" readonly>
                    </li>
                </ul>
            </div>

            <div class="days-of-week-wrapper">
                <div class="inline-wrapper">
                    <h5 class="title is-5">Days of Week</h5>
                    <ul class="days-of-week">
                        <li>
                            <label class="label">Monday</label>
                            <input class="input" type="text" readonly>
                        </li>
                        <li>
                            <label class="label">Tuesday</label>
                            <input class="input" type="text" readonly>
                        </li>
                        <li>
                            <label class="label">Wednesday</label>
                            <input class="input" type="text" readonly>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </section>

</body>
</html>

Answer 2

если вы хотите что-то такое же, как пи c, который вы задали в своем вопросе, вы должны удалить отступы / поля из ваших элементов (таких как input, label)

html {
      font-size: 14px;
    }

    .wrapper {
      display: flex;
      background: lightblue;
    }

    .warning-percentage-wrapper {
      background: lightcoral;
    }

    .warning-percentage {
      display: inline-flex;
    }

    .warning-percentage li {
      flex: 0 1 80px;
      margin-left: 1rem;
    }

    .days-of-week-wrapper {
      background: lightseagreen;
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }

    .inline-wrapper {
      background: pink;
      display: flex;
      flex-direction: column;
    }

    .days-of-week {
      display: inline-flex;
    }

    <section class="section">

      <div class="wrapper">

        <div class="warning-percentage-wrapper">
          <h5 class="title is-5">Warning Percentages</h5>
          <ul class="warning-percentage">
            <li>
              <label class="label">Low</label>
              <input class="input" type="text" readonly>
            </li>
            <li>
              <label class="label">Medium</label>
              <input class="input" type="text" readonly>
            </li>
            <li>
              <label class="label">High</label>
              <input class="input" type="text" readonly>
            </li>
          </ul>
        </div>

        <div class="days-of-week-wrapper">
          <div class="inline-wrapper">
            <h5 class="title is-5">Days of Week</h5>
            <ul class="days-of-week">
              <li>
                <label class="label">Monday</label>
                <input class="input" type="text" readonly>
              </li>
              <li>
                <label class="label">Tuesday</label>
                <input class="input" type="text" readonly>
              </li>
              <li>
                <label class="label">Wednesday</label>
                <input class="input" type="text" readonly>
              </li>
              <li>
                <label class="label">Thursday</label>
                <input class="input" type="text" readonly>
              </li>
              <li>
                <label class="label">Friday</label>
                <input class="input" type="text" readonly>
              </li>
              <li>
                <label class="label">Saturday</label>
                <input class="input" type="text" readonly>
              </li>
              <li>
                <label class="label">Sunday</label>
                <input class="input" type="text" readonly>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </section>

<!-- end snippet -->