Question

#box {
    width:160px;
    height:50px;
    background-clip:padding-box;
    position:relative;
    margin:0;
    left:1.4em;
    background:rgba(0,0,0,1);
    float:right;
    z-index:200;
}

#boxlist li {
    position:relative;
    list-style-type:none;
    display:inline-block;
    bottom:1em;
    margin-left:-2.5em;
    padding-right:1.5em;
    float:left;
    border-right:rgba(255,255,255,1) thin;
}

<header>
    <div id="box">
        <ul id="boxlist">
        <li class="imgli">
                <img src="images/banner-social-icon-twitter.png" class="boximg">
            </li>
            <li class="imgli">
                <img src="images/banner-social-icon-facebook.png" class="boximg">
            </li>
            <li class="imgli">
                <img src="images/banner-social-icon-email.png" class="boximg">
            </li>
        </ul>   
    </div>
</header>

嗨，我有一个带有3个图像/链接的水平导航的黑匣子。我希望在每个＆lt; li＆gt; 之后有一个白色的右边框，但没有边框出现。

Answer 1

您在border-rigt属性中缺少一个属性，说明边框应如何设置样式，例如solid或dotted，如下所示：

#boxlist li {
  border-right:thin solid rgba(255,255,255,1);
}

css列出带边框的水平导航

1 个答案: