Question

我正在尝试将竖条放入菜单中，但无法解决问题。

尝试使用此代码：

＆＃13;

$(document).ready(function () {
    $(document).foundation();
    
})

＆＃13;

.top-bar {
    background: #fff;
}

.top-bar-section ul li{
     background: #fff !important;
}

.top-bar-section li a:not(.button) {
    background: #fff !important;
    color: #4a4a4a !important;
    font-weight:bolder;    
}

.top-bar-section li a:not(.button):hover {
    background: #ebebeb !important;   
}

.top-bar-section ul li.active > a {
    background: #ebebeb !important;  
}

.top-bar-section ul li.active > a:hover {
    background: #ebebeb !important;   
}

.top-bar-section li:before {
content: " | ";
}

.top-bar-section li:first-child:before {
content: none;
}

＆＃13;

<div>
    <nav class="top-bar" data-topbar data-options="is_hover: false">
        <ul class="title-area">
            <li class="name">
                <h1>
                    <a href="#"></a>
                </h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
            <ul>
        <li>
            <a href="/ukih" target="_self">Home</a>
        </li>
        <li>
            <a href="/ukih/about" target="_self">About Us</a>
        </li>
        <li>
            <a href="/ukih/projects" target="_self">Projects</a>
        </li>
        <li>
            <a href="/ukih/investment" target="_self">Investments</a>
        </li>
        <li>
            <a href="/ukih/contact" target="_self">Contact Us</a>
        </li>
            </ul>
        </section>
    </nav>
</div>

＆＃13;

当我这样做时，整个菜单会向下移动。我也尝试在标签之前添加它，它可能会更好一点，因为它将它添加到菜单项的前面，但因为它在li标签内部，我不能使它很好地居中菜单项之间。它只是位于每个项目的前面。

知道如何做到这一点？

Answer 1

尝试使用以下CSS。

基本上：

border-right: 1px solid;

在菜单中的项目之间添加“行”。

ul > li:last-child { border-right: 0;}

删除右侧最后一项的边框。

此处示例：

http://jsfiddle.net/r46s08Lp/3/

.top-bar {
    background-color: white;

}

.top-bar-section li a:not(.button) {
    background: #fff !important;
    color: #4a4a4a !important;
    font-weight:bolder;    
}

ul > li {
    border-right: 1px solid;

}
ul > li:last-child {
    border-right: 0;

}

如有必要，您可以使用以下CSS调整“line”的高度：

.top-bar-section li a:not(.button) {height: 50px;}

基础菜单样式

1 个答案: