左对齐标题与输入框

Question

我想知道是否有更好的方法（更动态）使用 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

如果您想要与问题中的图片相同的内容，则必须从元素（例如输入、标签）中删除填充/边距

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 -->

Answer 2

我在使用 inline-flex 时遇到的问题是使用具有像素值的 flex 基础引起的。我需要输入都具有相同的宽度。我忘了提到我正在使用 Bulma（不是选择），默认情况下它会从元素中删除所有边距和填充。

我下面的例子应该可以更好地理解这个问题。请注意，我已将 UL - 'days-of-week' 设置为 align-self。现在 UL 的内容和我想要的一样广泛。但是，如果您使用开发工具将鼠标悬停在元素上，则仍有相当多的空间剩余。这是因为我使用的是具有像素值的 flex-basis。如果将 LI 设置为 flex: 1 并检查 DOM，则元素会很好地填充空间，包括边距。

解决方案是在 LI 元素上完全移除 flex 样式，并在“inline-wrapper”元素上设置固定的像素宽度。我认为这并不理想，但它允许您控制 LI 的大小，而无需对 LI 本身进行额外的 css 样式。

<!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>