CSS边框底部缺角

z0qdvdin 于 2022-12-24 发布在其他

关注(0)|答案(3)|浏览(192)

我想在菜单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>

边界在角上被打断了--我猜--左边界和右边界属性不在那里？
我不能把它放在<ul>元素上，因为这样行就太长了。

css

来源：https://stackoverflow.com/questions/19405512/css-border-bottom-has-missing-corners

3条答案

按热度按时间

r8uurelv1#

如果你去掉了它的宽度，你可以把它放在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>

赞(0）回复(0）举报 2022-12-24

58wvjzkj2#

正如您所建议的，问题在于缺少的左边框和右边框，它们有宽度，但没有颜色，因此这会扭曲下边框的外观，产生缺少缺口的错觉。
要解决这个问题，只需为元素定义border-width: 0，并允许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-width: 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>

赞(0）回复(0）举报 2022-12-24

iecba09b3#

不幸的是，这就是边界的工作方式。这些是左边界和右边界的端点。这里有一个变通方法，我在列表的底部添加了一个div：
（我还去掉了你的宽度：70%;从您的列表中）

#bluebar {
    position:absolute;
    bottom:0px;
    width:100%;
    height:5px;
    background-color:blue;
}

http://jsfiddle.net/BjGvp/6/

赞(0）回复(0）举报 2022-12-24

我来回答

CSS边框底部缺角

3条答案

相关问题

热门标签

最新问答