Ensure that three spans are precisely aligned to occupy a single line

My dilemma is as follows:

I have a line within a document that has a set width.

Now, there are 3 elements involved - one <a> tag and two <span> tags.

The content in the <a> tag varies in width each time it appears on the line.

The third element, which is a <span>, needs to be aligned with the right edge of the container holding all three elements.

The second element, being the first <span>, should be centered perfectly.

So far, I haven't been able to figure out a solution for this. While using a table may work, it doesn't feel like the best approach. I'm confident that there's a CSS-based solution available too.

htmlcssresponsive-design

Answer №1

If you want to enhance the display:table; option, consider using display:flex;, or revisit the floating method with a negative margin for compatibility with older browsers: VIEW DEMO (both methods)

Using Flex:

HTML

<p class="flex"><a href="#"> text as long as needed </a>
<span class="middle">
   text with any width text with any width text with any width text with any width 
</span>
  <span> span </span>
</p>

CSS

.flex {
  display:flex;
}
.middle {
  flex:2;
  white-space:nowrap;
}

float trickery:

HTML

<p class="funny"><a href="#"> text as long as needed </a>
<span class="right"> span </span>
<span class="layout">
  <span> text with any width text with any width text with any width text with any width </span>
</span>
</p>

CSS

a {
  float:left;
  background:#2EAF2E;
  color:#2B3A23;
  text-decoration:none;
}
.right {
  float:right;
  color:white;
  background:#333;
}
.layout {
  display:block;
  overflow:hidden;
  background:#AA2425;
  color:#2B3A23;
}
.layout span {
  display:inline-block;
  margin-right:-9999px;
}

Answer №2

Utilize display:table and display:table-cell for a consistent layout across various browsers. Don't forget about the handy vertical-align: middle property as well.

Check out this demonstration:

http://example.com/demo

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

Utilizing Jquery: Extracting the value of a child element upon clicking the encompassing parent div

I've created a table-like structure using divs instead of tables (because I strongly dislike tables). However, I'm facing an issue. I want to be able to click on one of the div elements and extract the values of its child elements. <div cla ...

jqueryhtml

Activate on click using JavaScript

When a link with the class .active is clicked, I want to use a JavaScript function to deactivate any other active links. The structure of the code should be as follows: <ul class="product"> <li><a href="#myanmar" class="active">Mya ...

javascriptjqueryhtmlcssonclick

CSS: Adjusting alignment differences between local host and server

I've been working on a webpage with rotating background images, and everything looked perfect on my localhost. But once I uploaded it to the server and viewed it in different browsers, some of the people in the images were not positioned as intended, ...

css

What is the best way to center an image within its div, especially when the image size may vary and could be larger or smaller than the div wrapper?

Is there a way to horizontally center an image inside a div, regardless of the size difference between the image and its wrapper? I am aware of a Javascript solution, but I am specifically looking for a CSS-based solution. The following sample code does ...

css

Enable hyperlink to open in a new browser tab after user clicks on button embedded inside an iFrame

<head> </head> <div> <iframe src="https://....."></iframe> </div> https://i.sstatic.net/dk21i.png I'm looking for a way to open the link in a new tab when clicking on this button. Currently, the page loads wi ...

javascripthtmlvue.js

Unable to define an object within the *ngFor loop in Angular

In order to iterate through custom controls, I am using the following code. These controls require certain information such as index and position in the structure, so I am passing a config object to keep everything organized. <div *ngFor="let thing of ...

javascripthtmlangulartypescript

Leveraging Jquery to add an element or text in front of the initial instance of a different element

Here is a sample of my xml code: <entry> <br> <abc></abc> <xyz></xyz> <example></example> <example></example> <example></example> </entry> <entry> <br> <abc>&l ...

javascriptjqueryhtml

Choosing pseudo-elements with CSS styling rules

I have been utilizing the Brave browser to block online ads. However, certain websites have found a way to insert ads into their HTML on the server-side, bypassing my ad-blocking efforts in Brave. Currently, Brave only offers the ability to block elements ...

csscss-selectorspseudo-elementadblock

Saving JSON data as a file on server

Currently, I am running a localhost website on my Raspberry Pi using Apache and I am seeking advice on how to export a JSON string to a file on the Raspberry Pi itself. While I do know how to export a file, I am unsure of how to send it to the Raspberry Pi ...

javascripthtmljsonraspberry-piexport

How can the presence of a CSS rule prevent another from being applied?

My attempt to create this HTML file in Chrome posed some challenges: <style> br { }​ [required] { border-width: 3px; border-color: red; } </style> <input required /> The entire content of the file is shown above. However, I noti ...

htmlcssgoogle-chrome

VueJS Error: Unable to access the 'className' property of an undefined variable

I'm currently working on a menu design project where I need to highlight the active tab/page that the user is on by adding a color class and utilizing JavaScript to update the active link. Here's a snippet of my template: <div class="menu ...

javascriptcssvue.js

rearranging items from one list to another list

I've encountered an issue in my HTML code that I need help with. I have included some classes for clarity, but their specific names are not essential. My goal is to make the "sub-nav" element a child of the "mobile parent" list item on mobile devices. ...

javascripthtml

Unable to add data to an Array once subscribed to BehaviorSubject

Hello everyone, this is my first time asking a question here. I hope it's clear enough for you to understand :) Let's dive straight into the issue at hand. I have a query regarding a behaviorSubject variable in TypeScript that is not allowing me ...

htmlarraystypescript

Utilize HTML5 Application Cache solely for storing and managing dependencies

My goal is to selectively cache certain files like JavaScript, CSS, fonts, and image sprites. Should I create a manifest file for these specific files or rely on the browser's caching mechanism? If using a manifest is preferred, can I still prevent ...

htmlbrowser-cache

Solving the default font problem in Laravel

I've been working on a project using Laravel and Bootstrap 4. Recently, I decided to switch from the default Laravel font, Nunito, to Lato. So, I made the necessary changes in my app.css file: @import url(https://fonts.googleapis.com/css?family=Nun ...

phpcsslaravelbootstrap-4fonts

Using node appendChild() in HTML for animating elements

As someone who is brand new to the world of web development, I am trying my hand at creating a webpage that expands as a button is clicked. Recently, I stumbled upon this helpful link which includes some code: The HTML code snippet is: <ul id="myList" ...

javascripthtmldomweb

I am experiencing difficulty with aligning my input boxes to the center in my React-Native

Just a heads up, this is my first time diving into the world of React Native, so bear with me as I try to figure things out. Please be kind if my question seems silly... Here's a snapshot of what I currently have: https://i.stack.imgur.com/VWGFm.png ...

cssreact-native

Setting the selected value of a COREUI multiselect widget

I received the following JSON response from an API. {"first_name":"Person 1","last_name":"Person 1","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="78081d0a0b17163 ...

htmljqueryjsoncore-ui

Showcasing the values of JavaScript

How can I resolve the issue depicted in the second picture? I need the value of 3 only in the USD column, with all others having a value of zero. <div class="span3"> <ul class="nav nav-tabs nav-stacked" > <?php foreach ( ...

javascriptjqueryhtmlmysqlcss

The Jquery script is ineffective for newly added elements

After creating an Ajax Form that functions well, I noticed that when the result of the form is another form, my script does not work for the new form generated. Is there a way to make the new form function like the old one? $(document).ready(function() ...

javascriptjqueryhtmlajaxforms