Geek Answers Handbook

Can I have a line between flexbox lines?

I have horizontal navigation, which is somewhat long, and needs to be rearranged for narrow displays. I used flexbox so that it spills over multiple lines.

But with many lines, the separation between the navigation elements is not so obvious. I tried to give them a border at the top, and it works, but the border, of course, is visible only by individual navigation options, without creating a beautiful dividing line between all the flexbox lines.

Please view the full page of the fragment, there is a problem with the display when it is viewed in the message. Or use this script . You may need to narrow the browser window to see multiple-row navigation.

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>
Run code
+4
1

, flexbox div

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

, , , div/flex div:

<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 .

0

More articles:


All Articles