Question

我有一个标题。在这个标题中有一个标题和一个选择器。选择器是一个简单的标签，下面有一个选择。我希望将标题的基线与选择内的文本对齐。如果我使用align-items: baseline，则标题的基线与标签的基线对齐，而不是与选择中的文本对齐。

如何将标题的基线与选择的基线对齐，而不是标签？

再现代码是

<div style="display:flex;align-items:baseline">
    <span style="font-size:23px;padding-top:16px">A title</span>
    <div>
        <div><span>A label</span></div>
        <div><select><option>An option</option></select></div>
    </div>
</div>

Answer 1

如何将标题的基线与基线对齐选择，而不是标签？

根据您的标记，您的标题margin-top:auto上需要span。

div.wrap > span { margin-top: auto; }

然而，这可能并不是一个确切的基线，因为这很大程度上取决于font-size，line-height，padding等，而不仅仅取决于您的标题span但也在select本身。

下面的代码段有助于将红线显示基线显示：

<强>段：

＆＃13;

* { box-sizing: border-box; padding: 0; margin: 0; }
div.wrap { display: flex; margin: 8px; position: relative; }
div.wrap > span { margin-top: auto; margin-right: 4px; font-size: 1.5em; }
div.wrap select { padding: 2px; }
div.wrap::after {
    content: ''; display: block;
    position: absolute; left: -4px; bottom: 4px;
    width: 240px; height: 1px;
    background-color: #f00;
}

＆＃13;

<div class='wrap'>
    <span>A title</span>
    <div>
        <div><span>A label</span></div>
        <div><select><option>An option</option></select></div>
    </div>
</div>

＆＃13;

陪伴小提琴：http://jsfiddle.net/abhitalks/n4z98wvn/

现在为什么baseline没有与基线对齐？它确实如此。如果将标签分成多行，则会看到它与第一行的基线对齐。您可以通过将其与flex-start进行比较来清楚地看到。

正如@Paulie_D指出的那样，您也可以使用flex-end获得预期的结果。然而，我的第一个解决方案中提到的问题仍然存在。您可以通过将其与标题上的缩减line-height进行比较来清楚地看到它。

以下是所有比较。

比较代码段

＆＃13;

* { box-sizing: border-box; padding: 0; margin: 0; }
div.wrap { display: flex; align-items: baseline; margin: 16px; }
div.wrap > span { font-size: 23px; border: 1px solid #ddd; }

div.wrap:nth-of-type(2) { align-items: flex-start; }
div.wrap:nth-of-type(3) { align-items: flex-end; }
div.wrap:nth-of-type(4) { align-items: flex-end; }
div.wrap:nth-of-type(4) > span { line-height: 20px; }

＆＃13;

<div class="wrap">
    <span>A title</span>
    <div>
        <div>
            <span>
                A label<br/>which breaks into<br/>lines, 
                is aligned at baseline with the title.
            </span>
        </div>
        <div><select><option>An option</option></select></div>
    </div>
</div>
<div class="wrap">
    <span>A title</span>
    <div>
        <div>
            <span>
                A label<br/>which breaks into<br/>lines, 
                is aligned at flex-start with the title.
            </span>
        </div>
        <div><select><option>An option</option></select></div>
    </div>
</div>
<div class="wrap">
    <span>A title</span>
    <div>
        <div>
            <span>
                A label<br/>which breaks into<br/>lines. 
                The select is mis-aligned with the title.
            </span>
        </div>
        <div><select><option>An option</option></select></div>
    </div>
</div>
<div class="wrap">
    <span>A title</span>
    <div>
        <div>
            <span>
                A label<br/>which breaks into<br/>lines. 
                The select is aligned neatly with the title.
            </span>
        </div>
        <div><select><option>An option</option></select></div>
    </div>
</div>

＆＃13;

比较小提琴：http://jsfiddle.net/abhitalks/r8spzk54/1/

Answer 2

试试这个：

HTML（没有更改;除了删除了一些内联样式并添加了id）

CSS

#container {
    display: flex;
}

#container > div {
    display: flex;
    flex-direction: column;
}

DEMO：http://jsfiddle.net/c7n0222p/4

对齐选择的项目基线

2 个答案: