Guide for positioning all navbar items except one to the left, beginning at the left edge, utilizing a set minimum and maximum width, while moving the final item to the right edge

Question

Guide for positioning all navbar items except one to the left, beginning at the left edge, utilizing a set minimum and maximum width, while moving the final item to the right edge

Is there a way to align all items in a navbar except for one to the left, with a fixed combined minimum and maximum width of 300px-400px, while sending the last item to the right margin?

I want the final result to resemble this:

https://i.stack.imgur.com/z10Lj.gif

Currently, I have four items structured in HTML and CSS like so:

HTML

<div id="nav">
        <ul>
            <li><a href="/">One</a></li>
            <li><a href="/">Two</a></li>
            <li><a href="/">Three</a></li>
            <li><a href="/">Four</a></li>
        </ul>
</div>

CSS

#nav span {
        display: inline-block;
        position: relative;
    }
    #nav ul {
        text-align: justify;
        max-width: 400px;
    }
    #nav ul:after {
        margin-left: 100%;
        content: "";
    }
    #nav ul li {
        display: inline;
    }

I am currently using a technique mentioned in this question's accepted answer to justify the elements within a 400px maximum width. However, I now need to exclude the fourth element from this justification and move it to the right side.

html css

Answer 1

Answer №1

To achieve the desired layout, you can utilize the CSS property display: flex on the ul element and apply margin-left: auto along with text-align: right; specifically to the last li element. I have set size constraints on the li elements ensuring they meet your specified dimensions, with a minimum of 100px (one third of 300) and a maximum of 133px (~ one third of 400px):

#nav ul {
      width: 100%;
      padding: 0;
      background: #ccc;
      display: flex;
    }
    #nav ul li {
      display: inline;
      box-sizing: border-box;
      min-width: 100px;
      max-width: 133px;
      padding: 5px 10px; /* styling enhancement */
    }
    #nav ul li:last-child {
      margin-left: auto;
      text-align: right;
    }

<div id="nav">
        <ul>
            <li><a href="/">One</a></li>
            <li><a href="/">Two</a></li>
            <li><a href="/">Three</a></li>
            <li><a href="/">Four</a></li>
        </ul>
</div>

For an alternative approach using floats instead of CSS3 frameworks:

#nav ul {
  width: 100%;
  padding: 0;
  background-color: #ccc;
  overflow: hidden;
}
#nav ul li {
  float: left;
  list-style: none;
  box-sizing: border-box;
  min-width: 100px;
  max-width: 133px;
  padding: 5px 10px;
  /* styling enhancement */
}
#nav ul li:last-child {
  float: right;
  text-align: right;
}

<div id="nav">
  <ul>
    <li><a href="/">One</a>
    </li>
    <li><a href="/">Two</a>
    </li>
    <li><a href="/">Three</a>
    </li>
    <li><a href="/">Four</a>
    </li>
  </ul>
</div>

Answer 2

To achieve the desired layout, you can utilize the CSS property display: flex on the ul element and apply margin-left: auto along with text-align: right; specifically to the last li element. I have set size constraints on the li elements ensuring they meet your specified dimensions, with a minimum of 100px (one third of 300) and a maximum of 133px (~ one third of 400px):

#nav ul {
      width: 100%;
      padding: 0;
      background: #ccc;
      display: flex;
    }
    #nav ul li {
      display: inline;
      box-sizing: border-box;
      min-width: 100px;
      max-width: 133px;
      padding: 5px 10px; /* styling enhancement */
    }
    #nav ul li:last-child {
      margin-left: auto;
      text-align: right;
    }

<div id="nav">
        <ul>
            <li><a href="/">One</a></li>
            <li><a href="/">Two</a></li>
            <li><a href="/">Three</a></li>
            <li><a href="/">Four</a></li>
        </ul>
</div>

For an alternative approach using floats instead of CSS3 frameworks:

#nav ul {
  width: 100%;
  padding: 0;
  background-color: #ccc;
  overflow: hidden;
}
#nav ul li {
  float: left;
  list-style: none;
  box-sizing: border-box;
  min-width: 100px;
  max-width: 133px;
  padding: 5px 10px;
  /* styling enhancement */
}
#nav ul li:last-child {
  float: right;
  text-align: right;
}

<div id="nav">
  <ul>
    <li><a href="/">One</a>
    </li>
    <li><a href="/">Two</a>
    </li>
    <li><a href="/">Three</a>
    </li>
    <li><a href="/">Four</a>
    </li>
  </ul>
</div>

Answer 3

Answer №2

Feel free to use this information

<html lang="en">
<head>
  <title>Customized Bootstrap Layout</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Sample</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Item One</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Item Two<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item Three</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Item Four</a></li>      
    </ul>
  </div>
</nav>
  </body>
  </html>

Note: Be sure to view the full page for a better experience

Answer 4

Feel free to use this information

<html lang="en">
<head>
  <title>Customized Bootstrap Layout</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Sample</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Item One</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Item Two<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item Three</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Item Four</a></li>      
    </ul>
  </div>
</nav>
  </body>
  </html>

Note: Be sure to view the full page for a better experience

Answer 5

Answer №3

#navbar {
  background: #F9F9F9;
}
#navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}
#navbar li {
  display: table-cell;
  width: 60px;
  text-align: center;
  border: 1px solid #CCC;
}
#navbar li:last-child {
  width: auto;
  text-align: right;
}
#navbar a {
  display: inline-block;
  padding: 7px;
}

<div id="navbar">
  <ul>
    <li><a href="/">One</a></li>
    <li><a href="/">Two</a></li>
    <li><a href="/">Three</a></li>
    <li><a href="/">Four</a></li>
  </ul>
</div>

Answer 6

#navbar {
  background: #F9F9F9;
}
#navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}
#navbar li {
  display: table-cell;
  width: 60px;
  text-align: center;
  border: 1px solid #CCC;
}
#navbar li:last-child {
  width: auto;
  text-align: right;
}
#navbar a {
  display: inline-block;
  padding: 7px;
}

<div id="navbar">
  <ul>
    <li><a href="/">One</a></li>
    <li><a href="/">Two</a></li>
    <li><a href="/">Three</a></li>
    <li><a href="/">Four</a></li>
  </ul>
</div>

Answer 7

Answer №4

Check out this Codepen

Is this the style you were looking for?

Feel free to use this code and make sure to maintain your current markup.


    #nav ul {
        text-align: justify;
        max-width: 400px;
        float:left;
        display:block;
        position:relative;
    }
    #nav ul li 
    {
      display:inline-block;
      float:left;
    }
    #nav ul li a 
    {
      text-decoration:none;
      color:#242424;
    }
    #nav ul li:last-of-type {
        position:absolute;
        right:-1200px;
    }

    #nav ul {
        text-align: justify;
        max-width: 400px;
        float:left;
        display:block;
        position:relative;
    }
    #nav ul li 
    {
      display:inline-block;
      float:left;
    }
    #nav ul li a 
    {
      text-decoration:none;
      color:#242424;
    }
    #nav ul li:last-of-type {
        position:absolute;
        right:-1200px;
    }

Answer 8

Check out this Codepen

Is this the style you were looking for?

Feel free to use this code and make sure to maintain your current markup.


    #nav ul {
        text-align: justify;
        max-width: 400px;
        float:left;
        display:block;
        position:relative;
    }
    #nav ul li 
    {
      display:inline-block;
      float:left;
    }
    #nav ul li a 
    {
      text-decoration:none;
      color:#242424;
    }
    #nav ul li:last-of-type {
        position:absolute;
        right:-1200px;
    }

    #nav ul {
        text-align: justify;
        max-width: 400px;
        float:left;
        display:block;
        position:relative;
    }
    #nav ul li 
    {
      display:inline-block;
      float:left;
    }
    #nav ul li a 
    {
      text-decoration:none;
      color:#242424;
    }
    #nav ul li:last-of-type {
        position:absolute;
        right:-1200px;
    }

Guide for positioning all navbar items except one to the left, beginning at the left edge, utilizing a set minimum and maximum width, while moving the final item to the right edge

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to adjust inline svg to the user viewport size?

Tips for customizing the scrollbar design in iOS Safari

What is the best way to keep an image fixed at the bottom, but only when it's out of view in the section

Unusual dark streak beneath the Wordpress emblem

JavaScript code encounters difficulties parsing HTML source

Discover the ultimate guide to creating an interactive website using solely JavaScript, without relying on any server-side

Adjust text size automatically to fit into a container with a fixed size

Stop the caching of HTML pages

if the checkbox is selected, navigate to the displayed section

Is there a way to position the text within an email body at the center using SendGrid?

Sequence of background colors not altering as intended

Center and align pictures within a stationary container

What are the benefits of keeping JavaScript and HTML separate in web development?

Identify the externally-sourced element of interest

Custom plugin shortcode HTML appearing within WordPress Edit Page interface

Ways to customize the default CSS styles of angularJS for elements like search box and more

Enhance your CSS link in Yii framework 2.0 by incorporating media printing capabilities

How can I center two divs within a wrapper div without also centering all the text inside?

I attempted to update the text on an HTML page using the content of "conetnt", however, it was unsuccessful

Responsive CSS design that adjusts to fit the content