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

What is the best way to add permissions to each role in JavaScript?

I have been attempting to dynamically add data to an HTML table using JavaScript. The data consists of roles and their corresponding permissions, which are retrieved using Laravel's ORM. I have tried utilizing a nested each jQuery function to append t ...

javascripthtmljqueryajaxlaravel

What causes the shift in the position of the div element?

I have been struggling with a problem in my code. Whenever I hover over this element, it rotates as intended but it also changes its position. I can't figure out why this is happening. Can someone please help me debug this? I would greatly appreciate ...

htmlcsstransition

Navigation menu with submenus containing buttons

I attempted to incorporate a dropdown into my existing navigation bar, but unfortunately, the dropdown content disappeared after adding the necessary code. I am now at a loss on how to troubleshoot this issue and make the dropdown function properly. Despit ...

javascripthtmljquerycssnav

Create a static div and a separate scrolling div

I am looking to achieve a layout where the top div is fixed at the top of the screen and the second div is scrollable below it. Both divs should have the same column width. I attempted to use position: fixed, but the columns are not aligned directly benea ...

htmlcsshtml-table

Altering the appearance of an input field upon submission

https://jsfiddle.net/3vz45os8/7/ I'm working on a JSFiddle where I am trying to change the background color of input text based on whether the word is typed correctly or incorrectly. Currently, it's not functioning as expected and there are no e ...

javascripthtmlcssonclickjsfiddle

Is it possible to leverage the className attribute in Material UI components?

Currently using React alongside Material-UI(MUI) for the frontend development. Encountering an issue with the Button Component in MUI, specifically the className prop. Struggling to apply custom styles using classes defined in the style.css file. Conside ...

cssreactjsmaterial-ui

Maximizing Efficiency: Utilizing a Single jQuery Function to Retrieve Specific Values

I have a webpage with select menus for choosing user type, minimum age, and maximum age. I want to select options and send values as an object array to ajax. Initially, the getAjax function is working when the page loads. However, it stops working when I c ...

javascriptjqueryhtmlajax

How to access a webpage on your Android device without the address bar visible

My question relates to sending Push Notifications through OneSignal. Upon clicking a push notification, it automatically redirects the user to my website. Is there a way to hide the address bar on the browser when this happens? I attempted using the follo ...

javascriptandroidjqueryhtmlweb

Conceal the scrollbar and enable horizontal swiping using CSS

I have set up a container where I want the content to scroll horizontally from left to right on mobile devices, and I would like to be able to swipe to navigate while hiding the scrollbar. You can view the implementation on this JSfiddle link Do you think ...

javascriptjqueryhtmlcss

Tips for creating a centered Reindeer

My reindeer code seems to be a bit off-center. Even though I followed a tutorial, my reindeer is not aligning properly as shown in the tutorial. Here is all the CSS code for the reindeer: .reindeer { height: 510px; width: 350px; position: ab ...

htmlcss

The many potentials of looping through Sass maps

My sass map contains a variety of color shades, and the full code can be found on Codepen: $pbcolors: ( pbcyan : ( 50: #E5F5FC, 100: #CCEBF9, 200: #99D7F2, 300: #66C3EC, 400: #33AFE5, 500: #009DBF, 600: #008CAB, 700: #007C98, 800: #006D85, 900: #005D72 ...

cssloopsdictionarysass

The alignment of my text appears to be off

I am facing an issue with the second <ul> on my webpage, which contains more content compared to the first one. In this second <ul>, the last line is appearing floated to the left and does not appear below the penultimate line as expected. Li ...

htmlcss

Initiate keyframe animation after completion of the transition (CSS)

Can someone assist me with implementing my idea? I want the "anim" animation to start as soon as image1 finishes its transition. My attempted solution: I tried using "animation-delay," but that didn't work for me. The issue is that "animation-delay" ...

css

Generating HTML widgets dynamically with jQuery: A step-by-step guide

Looking for a way to display an interactive widget on your page while allowing users to generate multiple instances and interact with them simultaneously? Imagine having a widget like this: <div id="my_widget"> <script type="text/javascript" ...

javascriptjqueryhtmlajaxwidget

Changing Background Color on Div Click

After spending a considerable amount of time on this, I find myself getting confused and stuck. It seems like I might be overlooking something crucial. Essentially, my code is designed to have the default div background (gamebg), and upon clicking one of t ...

javascripthtmlcss

The appearance of Bootstrap-Navbar is altered when viewed on a mobile device

After creating a website that was compatible with both web and mobile devices, I encountered an issue where the navbar would not collapse on my smartphone. However, when I resized the browser window to match the size of the smartphone screen, it worked per ...

javascriptjqueryhtmlcsstwitter-bootstrap

Setting up a Bootstrap tokenfield for usage with a textarea

I was attempting to set up a tokenfield on a textarea with increased height, but it is showing up as a single-line textbox. How can I modify the tokenfield to function properly with a textarea? <textarea name="f1_email" placeholder="Enter Friends' ...

javascriptjqueryhtmlcsstwitter-bootstrap

Halt the Changing of Button and Typography Styles with React Router and MUI

I am currently working on a component that I want to make clickable. However, when I wrap them in a <Link> element (from react-router-dom) or set component={Link} to="" on them, all the text inside them automatically becomes hyperlinks. For ...

cssreactjsmaterial-ui

Ways to display jQuery values as HTML text

Trying to concatenate the HTML text with the values of item.certificate_name has been a challenge for me. I've experimented with various methods, but none of them seem to work. The specific line I'm referring to is where I wrote . I have alread ...

javascriptjqueryhtmlweb

Do flexible layouts require more effort and time to create and upkeep compared to fixed width layouts?

Are flexible layouts more challenging to create and maintain than fixed width layouts, and do they take longer to design? Does a flexible layout only involve setting the width, height, and font size in em or %? What are the main advantages of using a fle ...

cssxhtmlusabilityaccessibility