Question

我需要将水平固定菜单设为如下图所示：

menu i need to design

我试着去做

但仍有一些点修改与上面的图像相同

剩下的分数（意思是我需要将这些分数添加到小提琴中）

1 - 添加|在单词之间

2 - 菜单的黑色矩形与上图不同。

我的小提琴如下（我尝试的是什么）

https://jsfiddle.net/ahmedsa/xkabohyw/

 ul {
        border-top: 4px solid red;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        position: fixed; /* Set the navbar to fixed position */
        top: 0; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */

    }

    li {
        float: right;
    }

    li a {
        display: block;
        color: white;
        padding: 16px;
        text-decoration: none;
    }
<ul>
        <li><a href="#home">الرئيسيه</a></li>
        <li><a href="#news">نبذه عن</a><i>|</i></li>
        <li><a href="#contact">اتصل بنا</a></li>
    </ul>

这样

如果可能的话，如何将这些点添加到小提琴中？

Answer 1

有很多方法可以实现这一目标。您可以使用边框或背景图像。但这是HTML和CSS here is update code

的解决方案

HTML

  <ul>
        <li><a href="#home">الرئيسيه</a></li>
        <span class="divider"></span>
        <li><a href="#news">نبذه عن</a><i>|</i></li>
        <span class="divider"></span>
        <li><a href="#contact">اتصل بنا</a></li>
    </ul>

CSS

ul {
    border-top: 4px solid red;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */

}

li {
    float: right;

    line-height:1px;

}
span {
     display: inline-block;
     width: 0;
     height: 1em;
     border-left: 1px solid #ccc;
     border-right: 1px solid #ccc;
     margin-top:8px;
     float: right;
}
li a {
    display: block;
    color: white;
    padding: 16px;
    text-decoration: none;


}

如何将水平固定菜单设计为如下图所示

1 个答案: