Question

我有一个用于导航项目的水平列表，每个导航项目都可以使用<span>标签来具有“小文本”区域和“大”文本区域。因此，例如，最终结果应如下所示：

请注意，最后一个导航项没有“小文本”部分，并且与导航的底部区域对齐。目前，我的代码如下：

navigation.scss

.nav {
    align-items: center;
    display: flex;
    height: 100%;
    margin-left: 5em;

    ul {
        display: flex;
        flex-direction: row;
        margin-top: auto;

        li {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            height: 65px;
            list-style: none;
            margin: .25em;
            margin-bottom: auto;
            padding: .65em 1.5em 1.5em 1.5em;
            position: relative;
            text-align: left;
            white-space: nowrap;

            span:first-child {
                font-size: .75em;
                font-weight: 500;
                text-transform: uppercase;
            }

            span:nth-child(2) {
                font-size: 1.15em;
                font-weight: 600;
                margin-top: auto;
            }
        }
    }
}

navigation.html

<div class="nav">
    <ul>
        <li>
            <span>Nav Item</span>
            <span>NUMBER ONE</span>
        </li>
        <li>
            <span>Nav Item</span>
            <span>NUMBER TWO</span>
        </li>
        <li>
            <span></span>
            <span>NUMBER THREE</span>
        </li>
    </ul>
</div>

使用此代码，最后一个导航项目“ NUMBER THREE”与其他两个导航项目中的底部文本不对齐。它将其与<li>项的中间或顶部对齐。我尝试通过flex-end使用对齐方式，但没有成功。最终目标是将第二个<span>标签与底部对齐，使其与其他导航项目对齐。有谁知道如何对齐我在Angular应用程序中将Flexbox与SASS（SCSS）配合使用。

谢谢。

Answer 1

向第二个子od -vAn -N4 -td4 < /dev/urandom选择器添加了display: block和margin-top: auto：

span

做到了。

使用Flexbox将<span>与列表项的底部对齐

1 个答案: