Center-aligned navigation bar with all elements except for one positioned on the right side

Question

Center-aligned navigation bar with all elements except for one positioned on the right side

Currently, I am attempting to center 4 elements next to each other while having one element float to the right using a flex-based solution.

The ideal outcome would be for the floated element to remain in place when resizing the browser, with the other 4 elements expanding to fill the remaining space until no more room is available.

I have explored various non-flex solutions without success in achieving this dynamic behavior.

It seems that either I have overlooked an obvious solution to this issue or it might simply not be feasible.

I am open to making extensive code adjustments and incorporating JS/JQuery solutions if necessary - flexibility is key here.

Any assistance on this matter would be greatly appreciated :)

javascript html css

Answer 1

Answer №1

Here are two different approaches to achieve centering, one using float and the other utilizing absolute positioning.

In the first scenario, the centering is calculated based on the width of the floated element itself.

On the contrary, in the second scenario, the centering is relative to the width of the parent element.

To accomplish centering, we apply text-align: center to a group of child elements with inline-block display property.

.nav {
  padding: 0;
  margin: 0;
  overflow: auto;
  text-align: center;
  border: 1px dotted blue;
  position: relative;
}
.nav li {
  display: inline-block;
  border: 1px dotted blue;
}
.rightfloat {
  float: right;
}
.rightpos {
  position: absolute;
  right: 0;
}

<p>Example 1:</p>
<ul class="nav">
  <li class="rightfloat">Right Most</li>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ul>

<p>Example 2:</p>
<ul class="nav">
  <li class="rightpos">Right Most</li>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ul>

Answer 2

Here are two different approaches to achieve centering, one using float and the other utilizing absolute positioning.

In the first scenario, the centering is calculated based on the width of the floated element itself.

On the contrary, in the second scenario, the centering is relative to the width of the parent element.

To accomplish centering, we apply text-align: center to a group of child elements with inline-block display property.

.nav {
  padding: 0;
  margin: 0;
  overflow: auto;
  text-align: center;
  border: 1px dotted blue;
  position: relative;
}
.nav li {
  display: inline-block;
  border: 1px dotted blue;
}
.rightfloat {
  float: right;
}
.rightpos {
  position: absolute;
  right: 0;
}

<p>Example 1:</p>
<ul class="nav">
  <li class="rightfloat">Right Most</li>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ul>

<p>Example 2:</p>
<ul class="nav">
  <li class="rightpos">Right Most</li>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ul>

Center-aligned navigation bar with all elements except for one positioned on the right side

Answer №1

Similar questions

Utilize the JSSOR Slider to dynamically pull images from an online album, such as by integrating with an RSS Feed

The function $(this).addClass() seems to be malfunctioning

What is the best way to create a line break in a React caption without it being visible to the user?

Encountered an uncaughtException in Node.js and mongoDB: User model cannot be overwritten once compiled

Having difficulty setting a value for a tooltip with replaceWith() function

Locate Checkbox by its Attribute Name and Value

Tips for positioning fixed column headers at the bottom of the header row

Excessive Function Calls Detected in AngularJS Application

JS Function created to supply elements to React component is failing to return correctly

The scrolling feature induces a contraction to the left side

Google Chrome - Automatically scroll to the bottom of the list when new elements are added in *ngFor loop

Create and dispatch a JSON POST request to a remote domain without direct server access

PHP script not refreshing properly on reload causing randomized content to display inaccurately

Create a unique onblur event listener for every element in a loop in Javascript

The prefixes for Ruby on Rails routes are not properly preprocessed in the .erb.js file

jQuery body background changer/utilizer

Embedding the scrollbar within the div container

Error encountered while connecting to SQL Server from node.js causing the express server to crash due to a ConnectionError

Demonstrating the transformation of child elements into parent elements through angular 6 ngFor

Alignment of inputs remains stubbornly off-center despite floating left