css - 我的顶部栏需要更短的分隔线(使用基础)

Question

我正在使用 Foundation，我的顶部栏看起来是我想要的，除了一件事，我希望分隔线更短，但我无法让它们成为任何其他方式。现在它们是全长的。

我的代码示例:

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
    </li>
                <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
 <section class="top-bar-section">
    <ul class="centered"> 
        <li> <a href="http://localhost:8888/wordpress/">one</a> </li>
            <li class="divider"></li>
        <li> <a href="http://localhost:8888/wordpress/?page_id=22">two</a> </li>
            <li class="divider"></li>
        <li> <a href="#">three</a> </li> 
            <li class="divider"></li>
        <li> <a href="#">four</a> </li> 
             <li class="divider"></li>
        <li> <a href="#">five</a> </li> 
    </ul>
 </section>
</nav>

foundation 中的 CSS 如下所示:

$topbar-divider-border-bottom: solid 1.8px #c6b456;
$topbar-divider-border-top: solid 1.8px #c6b456;

Answer 1

顶部栏分隔符 border-right 属性取自

_topbar.scss 的第 609 行

& > ul > .divider,
        & > ul > [role="separator"] {
          border-bottom: none;
          border-top: none;
          border-#{$opposite-direction}: $topbar-divider-border-bottom;
          clear: none;
          height: $topbar-height;
          width: 0;
        }

从变量 $topbar-divider-border-bottom 设置

如果您只想更改 border-right 而不影响其余属性，您必须在上面的 sass 中手动设置它。

或使用自定义 css 覆盖

.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
 border-right: solid 1px #4e4e4e;
}

或使用 sass ovveride