Question

当我使用justify-content: center将菜单项居中时，左图标的左边框消失。（查看JSFiddle上的问题）

我的解决方法是使用.add-left-border手动分配边框。但是我不确定为什么要这样做。有人知道这是怎么回事吗？

#header-menu {
  justify-content: center;
}

/* Why do I have to add this for border to show up? */
.add-left-border {
    border-left: 1px solid rgba(34,36,38,.15);
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>

<div class="ui icon menu" id="header-menu">
  <a class="item add-left-border">
    <i class="code branch icon "></i>
  </a>
  <a class="item">
    <i class="github icon"></i>
  </a>
  <a class="item">
    <i class="envelope icon"></i>
  </a>
</div>

Answer 1

这些按钮都没有左边框，因为它们都在其右侧应用了边框（见下文），而第一个按钮取决于菜单的边框以提供其视觉边界。

.ui.menu .item::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background: rgba(34,36,38,.1);
}

由于框架似乎没有提供居中的菜单，因此您将始终需要使用定制的解决方案。为了保持一致性和使HTML更加整洁，您可以仅通过CSS修改来实现它：

#header-menu {
    justify-content: center;
}

#header-menu .item:first-child::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 1px;
    background: rgba(34,36,38,.1);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
<div class="ui icon menu" id="header-menu">
  <a class="item">
    <i class="code branch icon"></i>
  </a>
  <a class="item">
    <i class="github icon"></i>
  </a>
  <a class="item">
    <i class="envelope icon"></i>
  </a>
</div>

在居中菜单上，左图标缺少左边框

1 个答案: