CODEWITHSUNDEEP
htmlcssflexbox
dspirel
dspirel

Reputation: 3

Trying to display two unordered lists on the same line with flexbox

It always displays on two lines no matter what I change. There is a probably an easier way to do this without flexbox, but I want to learn how to do it with the flexbox properties.

My desired outcome would be to display the first unordered list on the left,and the second on the far right(end) on the same line.

.navigation ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  flex-wrap: nowrap;
}

.leftNav {
  justify-content: flex-start;
}

.rightNav {
  justify-content: flex-end;
}

.navigation a {
  text-decoration: none;
}
<header>
  <nav class="navigation">
    <div class="leftNav">
      <ul>
        <li>Menu</li>
        <li><a href="">One</a></li>
        <li><a href="">Two</a></li>
        <li><a href="">Three</a></li>
      </ul>
    </div>
    <div class="rightNav">
      <ul>
        <li><a href="">My Account</a></li>
        <li><a href="">Login</a></li>
      </ul>
    </div>
  </nav>
</header>

Upvotes: 0

Views: 1483

Answers (2)

nicael
nicael

Reputation: 18997

Looks like just declaring navigation as a flex element does the trick, without any further flex settings. Worth to notice that it behaves this way since the row direction is the default one.

Regarding flex-wrap, it is not really necessary here at all, since there's not that much content that it would wrap (or wouldn't, depending on your aims). Here's a nice pic from mozilla demonstrating the use of flex-wrap.

justify-content is the property that is need to be set for the whole flex group, either. Here's the pic demonstrating the use.

I believe you would like the left nav to stick to the left and the right nav to stick to the right. In this case you just specify the justify-content: space-between;, as I explained a couple of sentences earlier.

.navigation{
  display:flex;
  justify-content: space-between;
}
 <nav class="navigation">
    <div class="leftNav">
      <ul>
       <li>Menu</li>
       <li><a href="">One</a></li>
       <li><a href="">Two</a></li>
       <li><a href="">Three</a></li>
      </ul>
    </div>
    <div class="rightNav">  
      <ul>
       <li><a href="">My Account</a></li>
       <li><a href="">Login</a></li>
      </ul>
    </div>
  </nav>

Upvotes: 1

Shobhit Chittora
Shobhit Chittora

Reputation: 1279

Hope this helps 😇

https://jsfiddle.net/cec5wqv5/5/

HTML 

<body>
<header>
  <nav class="navigation">
    <div class="leftNav">
      <ul>
       <li>Menu</li>
       <li><a href="">One</a></li>
       <li><a href="">Two</a></li>
       <li><a href="">Three</a></li>
      </ul>
    </div>
    <div class="rightNav">  
      <ul>
       <li><a href="">My Account</a></li>
       <li><a href="">Login</a></li>
      </ul>
    </div>
  </nav>
</header>
</body>

CSS 

.navigation{
  display: flex;
  justify-content: space-between; 
}
.navigation ul {
  list-style: none;
  display: flex;
}

.navigation a {
  text-decoration: none;
  margin: 8px;
}

Upvotes: 0

Related Questions