CSS - 边框拉伸到导航栏的整个高度答案

【问题标题】：CSS - Border stretched to whole height of navbarCSS - 边框拉伸到导航栏的整个高度
【发布时间】：2022-01-15 19:15:26
【问题描述】：

我正在尝试在我的大多数 LI（也是锚标签）的右侧制作一个边框，垂直填充整个 div，宽度为 1em，如下所示（我的 figma 模型）：

但是，我目前得到的只是：

这是我的 (S)CSS：

.navbar-main {
    margin-top: 2em;
    display: flex;
    background-color: hsl(206, 97%, 13%);
    color: hsl(0, 0%, 100%);
    border-radius: 34px;
    width: 90vw;
    height: 3em;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    text-align: center;

    .links {
        display: flex;
        justify-content: flex-start;
        margin-left: 2em;
        align-items: center;
    }

    ul {
        display: inherit;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 1em;
        height: 100%;
    }

    /* Add a vertical border to the right of all of the lis that stretches to the whole of the div vertically */
    li {
        border-right: 1px solid hsl(0, 0%, 100%);
    }


    .langselect {
        margin-right: 2em;
        display: inherit;
        justify-content: flex-end;
        align-items: center;
    }

    .icon {
        margin-right: 0.5em;
        height: 1em;
        width: 1em;
        font-size: inherit;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
    }
}

这是我的 HTML (REACT)：

<div className="navbar-main">
    <div className="links">
        <ul> {/*TODO: Remember to put icons before the a tags! (USE BOOTSTRAP ICONS!) */}
            <li>
                <a href="#">
                    <FaHome className="home icon"/>
                    Portfolio/CV
                </a>
            </li>
            
            <li>
                <a href="#">
                    <FaBookOpen className="book icon"/>
                    Portfolio/CV
                </a>
            </li>

            <li>
                <a href="#">
                    <FaPuzzlePiece className="puzzle icon"/>
                    !?@!#*$%
                </a>
            </li>
        </ul>
    </div>

    <div className="langselect">
        <FaGlobe className="world icon"/>
        <p>Language Select</p>
    </div>
</div>

感谢所有帮助，非常感谢。

【问题讨论】：

可以添加列表的css吗？
列表的css是什么意思？所有的 HTML（React 代码）和 (S)CSS 都针对这个问题提供了，以及整个导航栏。
你能把这段代码放到codepen中吗？
当然。现在可以了。
由于某种原因，它无法在 codepen 上运行。

标签： html css reactjs

【解决方案1】：

经过一番来回调试和编写代码后，我发现我可以这样做：

li {
        display: inherit;
        height: 100%;
        border-right: 1px solid hsl(206, 94%, 20%);
        padding-right: 1em;


        a {
            margin-top: auto;
            margin-bottom: auto;
        }
    }

    li:last-child {
        border-right: none;
        padding-right: 0;
    }

这也完美无缺，如下所示：

还是感谢你们的帮助！

【讨论】：