对齐嵌套元素中的标签和输入

Question

从语义上讲，我的数据结构如下：

<div class="inputs">
    <div class="top">
        <h4>Top</h4>

        <label for="top-1">Label 1</label>
        <input id="top-1"/>

        <label for="top-2">Label 2 is longer than the others</label>
        <input id="top-2"/>
    </div>

    <div class="middle">
        <h4>Middle</h4>

        <label for="middle-1">Label 3</label>
        <select id="middle-1">
            <option value="middle-value-1">Value 1</option>
            <option value="middle-value-2" selected>This is a longer value</option>
        </select>

        <label for="middle-2">Label 4</label>
        <input id="middle-2"/>
    </div>

    <div class="bottom">
        <h4>Bottom</h4>

        <label for="bottom-1">Label 5</label>
        <input id="bottom-1"/>

        <label for="bottom-2">Label 6</label>
        <input id="bottom-2"/>
    </div>
</div>

我想将它们显示为不同但相关的组。出于美观的目的，我希望对齐所有的输入和选择，并使其大小相等。有没有可能在不使用显式宽度的情况下做到这一点？我非常喜欢在任何可能的情况下让事物自己调整大小。

下面是对列和网格本身使用具有固定宽度的display: grid的实现。有没有办法用动态大小来做到这一点？

顺便说一句，我没有被display: grid卡住。这是我到目前为止想出的最简单的解决方案。我喜欢它有助于保持我的HTML简单和语义。如果我用display: table-row将标签和输入嵌套在div中，我也可以很好地使用display: table-row。但是，我仍然不能让事物动态地调整大小，除非我通过删除top、middle和bottom div来将其展平。

​

.inputs > div {
    display: grid;
    grid-template-columns: 13em 10em;
    width: 24em;
    gap: 0.5em;
    padding: 0.5em;
}

.inputs label {
    grid-column: 1;
}

.inputs select, .inputs input {
    grid-column: 2;
}

.inputs h4 {
    grid-column: 1 / span 2;
    margin: 0;
}

.top, .bottom {
    background-color: #c0c0c0;
}

.middle {
    background-color: #e0e0e0;
}

.middle, .bottom {
    margin-top: 0.5em;
}

<div class="inputs">
    <div class="top">
        <h4>Top</h4>

        <label for="top-1">Label 1</label>
        <input id="top-1"/>

        <label for="top-2">Label 2 is longer than the others</label>
        <input id="top-2"/>
    </div>

    <div class="middle">
        <h4>Middle</h4>

        <label for="middle-1">Label 3</label>
        <select id="middle-1">
            <option value="middle-value-1">Value 1</option>
            <option value="middle-value-2" selected>This is a longer value</option>
        </select>

        <label for="middle-2">Label 4</label>
        <input id="middle-2"/>
    </div>

    <div class="bottom">
        <h4>Bottom</h4>

        <label for="bottom-1">Label 5</label>
        <input id="bottom-1"/>

        <label for="bottom-2">Label 6</label>
        <input id="bottom-2"/>
    </div>
</div>

​

Answer 1

我用display: table找到了一个解决方案。它比网格解决方案更难看，而且语义也不像我想的那样好，但它很接近，而且它能做我想要的事情。

​

.inputs {
    display: table;
    border-collapse: collapse;
}

.inputs > .top, .inputs > .bottom {
    display: table-row-group;
    background-color: #c0c0c0;
}

.inputs > .middle {
    display: table-row-group;
    background-color: #e0e0e0;
}

.input {
    display: table-row;
}

.input > * {
    display: table-cell;
}

.input > h4, .input > label {
    padding: 0.5em 0.25em 0 0.5em;
}

.input > select, .input > input {
    margin: 0 0.5em 0.25em 0;
    box-sizing: border-box;
    width: calc(100% - 0.5em);
}

.input:last-child > * {
    margin-bottom: 0.5em;
}

.padding {
    padding: 0.5em 0;
}

<div class="inputs">
    <div class="top">
        <div class="input">
            <h4>Top</h4>
            <div class="empty"></div>
        </div>
        <div class="input">
            <label for="top-1">Label 1</label>
            <input id="top-1"/>
        </div>
        <div class="input">
            <label for="top-2">Label 2 is longer than the others</label>
            <input id="top-2"/>
        </div>
    </div>
    <div class="input">
        <div class="padding"></div>
    </div>
    <div class="middle">
        <div class="input">
            <h4>Middle</h4>
            <div class="empty"></div>
        </div>
        <div class="input">
            <label for="middle-1">Label 3</label>
            <select id="middle-1">
                <option value="middle-value-1">Value 1</option>
                <option value="middle-value-2" selected="selected">This is a longer value</option>
            </select>
        </div>
        <div class="input">
            <label for="middle-2">Label 4</label>
            <input id="middle-2"/>
        </div>
    </div>
    <div class="input">
        <div class="padding"></div>
    </div>
    <div class="bottom">
        <div class="input">
            <h4>Bottom</h4>
            <div class="empty"></div>
        </div>
        <div class="input">
            <label for="bottom-1">Label 5</label>
            <input id="bottom-1"/>
        </div>
        <div class="input">
            <label for="bottom-2">Label 6</label>
            <input id="bottom-2"/>
        </div>
    </div>
</div>

​

Answer 2

您可以使用以下内容更动态地设置网格：

.inputs {
  width: 33%;
  min-width: 25em;
}

.inputs > div {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0.5em;
  padding: 0.5em;
}

我使用你的外部容器来处理宽度，因为它与屏幕相关。25px的硬min-width使长标签不会换行，如果屏幕尺寸导致33%的宽度低于25px，则会显示水平滚动条。

对于内部容器，您可以将grid-template-columns中的单位更改为fr，这意味着可用空间的一小部分。这将允许您的列随窗口动态调整大小(直到您点击外部容器的min-width )。您可以尝试使用width百分比来计算出您希望进行多少动态大小调整。

如果你愿意的话，This是fr的一个很好的写法。