时间戳

首页 > 解决方案 > 使用 flexbox 在 li 标签中定义锚标签

html - 使用 flexbox 在 li 标签中定义锚标签

问题描述

我希望锚元素在使用 flexbox 的 li 标记内具有 width: 100% 。好像没有。这个怎么做？这里绿色边框用于 li 元素（#part_1 nav ul li），白色边框用于锚元素（#part_1 nav ul li a）。 它看起来如何 这是HTML：

<nav>
     <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">PORTFOLIO</a></li>
        <li><a href="">ABOUT US</a></li>
        <li><a href="">CONTACT</a></li>
    </ul>
</nav>

和款式：

#part_1 nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;

    flex: .15 .15 15%;
    width: 100%;

    background-color: #313030;
}

#part_1 nav ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;

    flex: 0 1 50%;
}

#part_1 nav ul li {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;

    padding: 0 3%;
    border: 1px solid greenyellow;
}

#part_1 nav ul li a {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    flex: 1 0 100%;
    text-decoration: none;
    color: #e0e0e0;

    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 1em;

    border: 1px solid white;
}

标签： htmlcsshtml-listsanchor

解决方案

推荐阅读