html - CSS 边框底部有缺 Angular-6ren

html - CSS 边框底部有缺 Angular

转载作者：太空宇宙更新时间：2023-11-03 20:00:15

我想在我的菜单 UL 下面有一个长边框，但是列表项上的“border-bottom”属性不能正常工作:

#headermenu {
    height: 40px;
    background: #f47a20;
    position: relative;
}
#headermenu .menu {
    background: #F47B20;
    float: left;
    border: 1px solid #D66C1C;
    padding: 0.6em 1em;
    margin-top: 0.5em;
    list-style-type: none;
}
#headermenu-left {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    margin: 0;
}
#headermenu-left .menu {
    border-bottom: 4px solid #004B8D;
}

<body>
    <div id="headermenu">
        <ul id="headermenu-left">
            <li class="menu">
                <a href="#">Link 1</a>
            </li>
            <li class="menu">
                <a href="#">Link 2</a>
            </li>
            <li class="menu">
                <a href="#">Link 3</a>
            </li>
            <li class="menu">
                <a href="#">Link 4</a>
            </li>
            <li class="menu">
                <a href="#">Link 5</a>
            </li>
            <li class="menu">
                <a href="#">Link 6</a>
            </li>
        </ul>
    </div>
</body>

边界在拐 Angular 处被打断了 - 我猜 - border-left 和 border-right 属性不存在？

我不能把它放在 <ul> 上元素，因为那一行太长了。

最佳答案

去掉上面的宽度就可以放在UL上了。删除你的最后一条规则并使用它:

#headermenu {
    height: 40px;
    background: #f47a20;
    position: relative;
}
#headermenu .menu {
    background: #F47B20;
    float: left;
    border: 1px solid #D66C1C;
    padding: 0.6em 1em;
    margin-top: 0.5em;
    list-style-type: none;
}
#headermenu-left {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    border-bottom: 4px solid #004B8D;
}

<body>
    <div id="headermenu">
        <ul id="headermenu-left">
            <li class="menu">
                <a href="#">Link 1</a>
            </li>
            <li class="menu">
                <a href="#">Link 2</a>
            </li>
            <li class="menu">
                <a href="#">Link 3</a>
            </li>
            <li class="menu">
                <a href="#">Link 4</a>
            </li>
            <li class="menu">
                <a href="#">Link 5</a>
            </li>
            <li class="menu">
                <a href="#">Link 6</a>
            </li>
        </ul>
    </div>
</body>