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.

htmlcss

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

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 №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 №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;
    }

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

Navigating through different templates in {output} with Ember

My first ember app is currently under construction, featuring CRUD operations. Here's a snippet of my index.html code: <script type = "text/x-handlebars" id = "settings"> <table> {{#each setting in controller}} <tr> < ...

htmltemplatesember.js

Tips for including multiple spaces within a cell of a table

I've come across an issue while working on a table and attempting to insert text with multiple spaces. For example, I want to add the text HELLO<1stSPACE><2ndSPACE>WORLD. However, when I enter it as HELLO WORLD, it only displays with a single s ...

htmlcsshtml-table

How can I prevent placeholder text from being included when submitting a form using serialize()?

After submitting my form, I save the data using an $.ajax function with $("#formName").serialize() call. One issue I'm facing is that the placeholder text gets submitted along with the serialize() action. I have a function in place to reset the plac ...

htmljqueryplaceholder

Unable to adjust the text color to white

As someone who is new to Typescript, I'm facing a challenge in changing the text color to white and struggling to find a solution. I'm hoping that someone can guide me in the right direction as I've tried multiple approaches without success ...

csstypescriptmaterial-ui

Creating a custom script for a search field that retrieves information from an XML document

Attempting to create a script that iterates through an XML file, the provided code currently displays alerts but fails to show information when a valid value is entered into the search field. However, upon removing the error checks and keeping the final ...

javascripthtml

What is the best way to perfectly center text within an image, maintaining both vertical and horizontal alignment, all while being contained within an <a> tag?

I've been working with this code snippet. When I set the position of .thumb-title to absolute and use bottom: 50%, it shifts upwards in relation to its own height. .project-thumb { position: relative; } .thumb-title { font: 400 1.5rem 'La ...

htmlcss

I am encountering an issue while running npm run webpack in production mode where the CSS file is not being generated separately in the dist folder as expected. The file is not appearing as it should

Here is the code snippet from my webpack configuration file: const currentTask = process.env.nmp_lifecycle_event const path = require("path") const MiniCssExtractPlugin = require('mini-css-extract-plugin') const config = { entry: './ ...

cssnpmwebpackbuild

Show a div depending on user input

For those with more programming experience than myself, I have a simple question. In Rails, using coffescript, I want to show additional content based on a user's selection. Essentially, if they click on a checkbox, it should reveal an extra field for ...

jquerycssruby-on-rails-4coffeescript

Attempting to toggle the visibility of div elements based on radio button selections

I'm currently working on a script that will dynamically show and hide different div elements based on the radio button selection made by users. The jQuery library is loading correctly, as I have tested it with an alert message upon page load. Si ...

htmljquery

Positioning an element absolutely inside a Material-UI React dialog

Currently, I am working on a Dialog component that includes a button located in the bottom right corner. When this button is clicked, it triggers the display of another div containing a list of items. However, I have encountered an issue where the list is ...

cssreactjsmodal-dialogmaterial-ui

Discovering the largest element within a group to establish the height for the rest

There is a component mapping card elements that look like this: https://i.stack.imgur.com/CktsE.png The topmost, leftmost card appears to be missing some height compared to others. Is there a way to determine the height of the tallest components and then ...

cssreactjsnext.jstailwind-cssnext.js13

Ways to determine if a new set of input values duplicates previous rows in an array

My form has an array of input fields. Is there a way to validate each row's inputs and ensure that they all have at least one unique value in any field, preventing identical rows? For example, the 2nd row should only be allowed to have a maximum of ...

javascripthtmlarraysvue.js

Tips for adjusting the size of your Navigation bar

I've noticed that most of the questions I've come across are related to WordPress or Bootstrap nav bars, which I'm not familiar with. I've created mine using CSS. I want to enhance my navigation bar for mobile users by making the butto ...

htmlcss

Article discussing the Facebook like button

I've recently incorporated Facebook like buttons into the articles on my online store. It's great because when someone shares a post about a product or article, it shows up on their wall. Users receive notifications on Facebook when someone else ...

phphtmlfacebookfacebook-graph-api

Is there a way to stop TD from going to the next line?

I am using Javascript to dynamically generate a table and I want it to extend beyond the boundaries of the page. When I manually create the table, it works fine and extends off the page, but once I put it into a loop, the <td> elements wrap onto a se ...

javascripthtmlcsshtml-table

How can I retrieve the HTML content of a ReactJS rectangle element saved in an array?

Within a loop, I am creating rectangle elements and adding them to an array: rectangles = []; render: function() { for (var i = 0 ; i < 10; i++) { rectangles.push (<Rectangle height={this.props.afm} width={this.props.afm} x={xpos} y={ypos} va ...

htmlarraysreactjsstyleselement

Is there a way to add a dynamic animation of steam rising from a coffee cup to my SVG icon design?

I'm a budding graphic designer eager to master the art of SVG animated icons and coding. Recently, I created an SVG file of a beautiful cup of coffee using Illustrator and now I want to make the steam rise realistically through animation. However, des ...

htmlcssanimationsvg

Ways to stop button from wrapping inside a div

While working on a search page, I encountered an issue where the submit button overlaps with the text input when zooming in due to lack of space. Is there a solution to prevent this overlapping and keep the layout intact? HTML <input type="text> &l ...

htmlcss

Reordering Divs in Bootstrap 3 Specifically for Small Screens

Just getting started with my first responsive design project, and I'm wondering if it's possible to achieve something like this using Bootstrap 3. The goal is to switch from the current layout: https://i.stack.imgur.com/lABXp.jpg To https://i. ...

csstwitter-bootstrapsortingmobile

Hide popup using HTML when clicking outside of it

Currently, I have implemented Bootstrap Popover with HTML content using the code snippet below. This code is based on the answer provided at . $(".song-status-link").popover({ html: true, placement: 'bottom', ...

jquerycsstwitter-bootstrap-3popover