Attempting to showcase a pair of unordered lists side by side using the power of flexbox

I am having trouble getting this to display on a single line, no matter what I try. While there may be simpler ways to achieve this without using flexbox, I am eager to learn how to do it using flexbox properties.

My desired outcome is to have the first unordered list displayed on the left, and the second one on the far right, both 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>

htmlcssflexbox

Answer №1

By simply declaring the navigation as a flex element, it seems to work without any additional flex settings. It's worth noting that this behavior occurs because the default direction is set as row.

In terms of flex-wrap, it may not be necessary here since there isn't enough content to wrap (or not wrap, depending on your intentions). You can refer to this image from Mozilla demonstrating the use of flex-wrap: nice pic.

justify-content is the property that needs to be set for the entire flex group. Here's an image illustrating its use: the pic.

To ensure that the left nav sticks to the left and the right nav sticks to the right, you can specify justify-content: space-between;, as I mentioned earlier in a few sentences.

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

Answer №2

Hopefully, this information is helpful! 😇

Check out the code snippet here!

Here is the HTML structure:

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

And here is the CSS styling:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

PHP form submission upon conditions being satisfied

I am not utilizing Javascript as it is disabled in my current environment. Here is the code that I would like you to review. I am attempting to use PHP to replicate the functionality of Javascript or jQuery's simple : document.form2.submit() <div ...

phpjavascripthtmlformssubmit

Empty spaces in an "option" html gadget on a website created with Structr 4.1.2 Community edition

Currently using Structr version 4.1.2 on a managed Sandbox (Community edition) of Structr. I am currently investigating the functionality of Structr and have encountered an issue related to how an "html" select element functions on a page built in Structr ...

htmlstructr

Tips for utilizing ion view within an ionic 2 application

In my original use of Ionic 1, I placed the footer after the <ion-content> and before . However, in the new Ionic 2, I can't seem to find any reference to <ion-view>. My specific need is to have two buttons at the bottom of the screen fol ...

htmlcssangularjsionic2hybrid-mobile-app

Tips for choosing a particular value in an HTML <script> query

Can someone please help me figure out how to select specific values in a form using a query? I'm trying to extract certain values like Hello and Lorem ipsum..., as well as Hi and Nullam fringilla... from the Content.join(''); section. I apo ...

javascripthtml

Assigning a JavaScript code block to execute exclusively on designated pages

I have implemented webpack to bundle all my .js files into one app.js, which is utilized across all pages in my project. However, I have encountered an issue where code intended for one page is impacting another page where it is not required. For example, ...

javascripthtmlwebpack

The functionality of jQuery plugins does not seem to extend to content loaded via Ajax

Hello everyone, I have encountered a frustrating issue. I am currently utilizing bootstrap 2.3 along with some jQuery plugins for form styling and other purposes. However, I've noticed that when I load ajax content, particularly select elements, the ...

jquerycssajax

Inquiring about the best method to determine the intersection point between two lines in Draw i.o

Can someone please explain how to find the coordinate point where two lines intersect in draw i.o? I am looking for a Javascript function to solve this issue and get the coordinate of the point only. For example: ...

javascripthtmlcssdraw

Trouble with jQuery: Background color fade in/fade out effects not functioning

Issue with changing background color during FadeIn and FadeOut effect. Whenever I click on the "whatup" link, my button should blink with alternating red and white colors. Below is the HTML code: <a id="blkwhatsup" href="#" >whatup</a> <in ...

jquerycssfadeinfadeout

Using Ajax to implement Basic Authentication for securely accessing an https-protected webpage without requiring users to manually enter their username and password in a

Is there a way to access and display a website page hosted at this URL - , without encountering any authentication dialog box from my application on the same network? I have been unable to bypass the username and password entry request. I successfully imp ...

javascripthtmlajax

Creating an HTML layout or template directly within a JavaScript bookmarklet

Currently, I am using a bookmarklet that generates a user interface for interaction. The method I have been using involves creating elements using $('<element>').addClass().css({..});, but this approach is proving to be difficult to maintai ...

javascripthtmltemplate-enginebookmarklet

The section cannot be shown in a flex layout within a grid container

My goal is to showcase a grid layout containing multiple sections within a div, but I'm encountering an issue where the sections are only displaying as blocks. I am seeking assistance in making the second portion of the data appear flexed. Currently, ...

htmlcssvue.js

Discovering the technique to display data in PHP only from the database that is specific to the authenticated user

When creating a to-do list, I want the user (not admin) to only see tasks assigned to them. This should be indicated under the assignee column with their name. https://i.stack.imgur.com/WP5C8.png However, currently the user named Lala can see not only th ...

phpjqueryhtmlmysql

Targeting all children instead of just the odd ones when using `nth-child(odd)`

In the portfolio, I have a unique requirement where every odd entry should be reversed. These projects are generated dynamically from an array and passed into the component through props. To style it, I'm utilizing styled-components. However, I&apos ...

cssreactjscss-selectorsstyled-components

Fetching data in VueJs before redirecting to a new page

Within the mounted function, I am creating an action that fetches data from a Rest API and populates my table in a Vue.js component mounted() { UserService.getProjects().then( (response) => { this.isProject = true; this.project ...

javascripthtmlcsstypescriptvue.js

Exploring the use of ASP:Label, <span>, and accessing elements by their ID

Attempting to access a control within a specific class has been challenging for me. HTML Code: <span class="GeoPanelHeaderLeft"> <asp:Literal ID="LiteralHeaderText" runat="server" Text="New Survey Ticket"></asp:Literal> & ...

c#asp.nethtmlgetelementbyid

Choosing and adding a div to another using the select method

Can someone assist me with this task? My goal is to dynamically append a div when selecting an option from a dropdown, and hide the div when the same option is selected again. Additionally, I want the name of the selected option to be displayed on the left ...

htmljquerycssdrop-down-menubootstrap-select

What are the benefits of utilizing the useStyles MaterialUI function instead of traditional CSS?

As I develop my MERN application, I am utilizing Material UI components along with inline attributes. However, I find myself questioning the necessity of creating a JavaScript file just to import the makeStyles function, which essentially outputs an obje ...

cssmaterial-ui

Tips for consistently showing the addition symbol in my search bar

I created a code snippet that showcases a search box with CSS animations and jQuery toggling functionality. One issue I encountered is ensuring that the plus icon remains visible at all times, whether the search box is expanded or contracted. How can I ac ...

jqueryhtmlcsssearch

Tips for seamlessly integrating an overlay into a different image

My current system is set up to overlay the image when you check the checkboxes. However, I'm facing an issue with positioning the image inside the computer screen so it's not right at the edge. Can anyone provide assistance with this? <html&g ...

javascriptjqueryhtmlcss

Resizing the width to fit truncated content

When displaying text within a span element inside a fixed-width structure, I want to use ellipsis if the text overflows. To show the full text, I have initialized a Bootstrap tooltip in these elements. However, the tooltip is visually misplaced due to the ...

htmlcss