Question

我有一个水平导航，有点长，需要重新排列以进行窄显示。我使用flexbox使它重排成多行。

但是有很多行，导航项之间的划分并不那么明显。我尝试在顶部给它们一个边框，它有点起作用 - 但边界当然只能在各个导航选项上看到，而不是在所有flexbox行之间创建一个漂亮的分界线。

请查看整个代码段，在帖子中查看时出现显示问题。或者使用this fiddle。您可能必须缩小浏览器窗口以查看多行导航。

header {
    height: 3em;
    background-color: #fff;
}


#main {
    height: 9em;
    background-color: #5987d1;
}

footer {
    height: 3em;
    background-color: #a8a8a8;
    border-top: 1px solid #0047b9;
}

ul.horizontal-nav {
    background: rgba(72, 72, 72, 1);
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.75);
    list-style: none;
}

li.NavigationLi2, li.selected-branch-root {
    padding: 0.75em 1em;
    display: block;
    border-top: 1px solid #2662c3;
}

li.selected-branch-root {
    background: #2662c3;
}

li.NavigationLi2 > a, li.NavigationLi2 > a:visited {
    color: #e6eeff;
    text-decoration: none;
    -ms-word-wrap: nowrap;
    word-wrap: nowrap;
}

li.selected-branch-root > a, li.selected-branch-root > a {
    color: #fff;
    text-decoration: none;
    -ms-word-wrap: nowrap;
    word-wrap: nowrap;
}

<header>
</header>
<nav class="horizontal-nav">
    <ul class="horizontal-nav">
                <li class="selected-branch-root"><a href="/Search">Search</a>
                </li>
                <li class="NavigationLi2"><a href="/My%20models">My models</a>
                </li>
                <li class="NavigationLi2"><a href="/Account">Account</a>
                </li>
                <li class="NavigationLi2"><a href="/Management%20Tools">Management</a>
                </li>
                <li class="NavigationLi2"><a href="/Administration">Administration</a>
                </li>
                <li class="NavigationLi2"><a href="/Help">Help</a>
                </li>
        </ul>
</nav> 
<section id="main">
</section>
<footer>
</footer>

Answer 1

这就是我所说的我可以说我有一个内置3个div的flexbox容器

<div class="flex">
  <div>
    <h2>Free Shipping</h2>
  </div>
  <div>
    <h2>Everything In Stock</h2>
  </div>
  <div>
    <h2>Largest Inventory</h2>
  </div>
</div>

我正在玩的是为了在3 div / s flex项目的中间创建一条线，只需在div之间添加另一个flex项目，如下所示：

<div class="flex">
  <div>
    <h2>Free Shipping</h2>
  </div>

  <img src="lib/xxx/img/ydivider.png" alt="divider"/>

  <div>
    <h2>Everything In Stock</h2>
  </div>

  <img src="lib/xxx/img/ydivider.png" alt="divider"/>  

  <div>
    <h2>Largest Inventory</h2>
  </div>
</div>

您现在可以看到我们有5个弹性项目而不是3个。我找到的另外两个弹性项目正确间隔在中间。请记住，如果您转到显示为列的断点，则需要在该点处使用水平img。

Answer 2

假设您的哲学允许您：1）改为使用flebox或ul进行导航；和2）在您的html中专门出于美学目的插入标签，然后我提出了一个建议。

为您的元素创建一个包装div，并向其中添加您要跨越行的CSS（背景，边框，填充...），并向其添加属性flex: 1 。您可能还想添加min-width: fit-content（或最大含量）以防止其断行。

我已经在快速修复前后的标记下面添加了

。

#flex-container {
  display: flex;
  flex-wrap: wrap;
}
#flex-container > div {
  padding: 8px 24px;
  border-bottom: 4px solid orange; 
  background: purple; 
}
.flex-menu {
  font-size: 13px;
  font-family: sans;
  color: white;
}
.fix {
  flex: 1;
  min-width: fit-content;
}
.force-break {
  max-width: 340px;
}

<div class="force-break">
  
  <h2>Plain</h2>
    <div id='flex-container'>
      <div class="flex-menu">Search</div>
      <div class="flex-menu">My models</div>
      <div class="flex-menu">Account</div>
      <div class="flex-menu">Management</div>
      <div class="flex-menu">Administration</div>
      <div class="flex-menu">Help</div>
    </div>
  
  <h2>With fix</h2>    
  <div id='flex-container'>
    <div class="fix"><div class="flex-menu">Search</div></div>
    <div class="fix"><div class="flex-menu">My models</div></div>
    <div class="fix"><div class="flex-menu">Account</div></div>
    <div class="fix"><div class="flex-menu">Management</div></div>
    <div class="fix"><div class="flex-menu">Administration</div></div>
    <div class="fix"><div class="flex-menu">Help</div></div>
  </div>
  
</div>

我可以在flexbox行之间划一条线吗？

2 个答案: