Arranging individual spans within a div using CSS for perfect alignment

My current code looks like this:

<div id='div_selectores' class='row_titulo '>
    <span class="label_selector" id="lbl_show"></span><span id="div_selector_show"></span>
    <br />
    <span class="label_selector" id="lbl_summarized_by"></span><span id="div_selector_summarized"></span>
    <br />
    <span class="label_selector" id="lbl_column_headers"></span><span id="div_selector_headers"></span>
</div>

In the above code, I am displaying labels with their selectors using span tags as shown below:

I want to align all the selectors on the same line after the last text of the longest label. In this case, I want them to start at the same position where the "Product Range" label ends.

Is there a way to achieve this alignment only using CSS without making changes to the HTML?

htmlcssalignment

Answer №1

To ensure alignment of dropdown elements, consider setting a fixed width for the 'label_selector' class:

Edit For proper display, add 'display: inline-block' as suggested by Rahul. In this example, a select input is used, but span elements can also be employed. 

.label_selector {
  width: 200px;
  display: inline-block;
}
<div id='div_selectores' class='row_titulo '>
    <span class="label_selector" id="lbl_show">some text 1</span><select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
    <br />
    <span class="label_selector" id="lbl_summarized_by">some text long here 1</span><select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
    <br />
    <span class="label_selector" id="lbl_column_headers">some text really long here 1</span><select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</div>

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

When using the "Content-Disposition" header with the value "inline;filename=" + fileName, it does not necessarily guarantee that PDF files will be displayed directly

When a link is clicked, I want the PDF file to first show in a new tab as a preview before allowing users to download it. I researched and found advice suggesting that including these two headers would achieve this: Response.AddHeader("Content-Dispositio ...

javascriptc#htmlangularjsasp.net-mvc

Maintaining the image's aspect ratio while cropping it to fit within the maximum or minimum height

Is there a way to make an image responsive by resizing it while keeping its aspect ratio intact at all sizes? I want the height of the image to stay fixed above 650px, cropping the top and bottom to maintain the ratio without stretching. Additionally, I do ...

cssimageresponsive-design

Has anyone come across an XSLT that can effectively convert Apple Pages files into high-quality HTML?

When Apple’s word processor/DTP app Pages saves its files, it does so as zipped folders with an XML file containing the content and attachments like images stored as separate files. I am interested in converting this content into HTML format, using < ...

htmlxsltiwork

Tips for determining the full width of a webpage, not solely the width of the window

While we can easily determine the width of the window using $(window).width(); This only gives us the width of the window itself, not accounting for any overflowing content. When I refer to overflowing, I mean elements that extend beyond the visible view ...

javascriptjqueryhtmlcss

In order to maintain a custom tooltip in an open state until it is hovered over, while also controlling its

When hovering over the first column of the table, a tooltip will appear. Within each material tooltip, I would like to include a button at the bottom right after the JSON data. When this button is clicked, it should open an Angular Material dialog. <ng ...

javascripthtmlcssangular

In Firefox, the scaling of svg masks is not functioning properly

Trying to utilize an svg for masking an image, but encountering scaling issues in Firefox. Safari and Chrome seem to display correctly, with proper fallbacks for IE. Website: SVG File: CSS: -webkit-mask: url("../img/feelfilms-logo.svg#logo_mask"); mask ...

csssvgscalemask

polygon with five or more sides

Can divs be created with shapes such as five or six corners? I am looking to create clickable zones on a map and any alternative methods would be greatly appreciated. ...

csshtml

Do you think it's achievable to modify the color using CSS's order attribute?

When I look at the code in Firefox's inspector, I notice this : element { order:35; } Can a color be assigned to it? I am customizing my year outlook calendar and have set a particular day to display in a different color. But when I click on the mo ...

htmlcsstags

What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

Hey there, I'm looking for a way to expand the width of a clicked div while making the other div disappear from the screen simultaneously. It should also be toggleable, so clicking the button again will shrink the div and bring back the other one. For ...

javascriptjqueryhtmlcss

Incorporate a backdrop to enhance a material icon

I'm working with the following Material Icon code but I want to enhance it by adding a white background for better contrast. Any suggestions on how to achieve this? <a id="lnk_quick_print" href="javascript:;" title="Quick P ...

htmlcssmaterial-uimaterial-design

What is the best way to dynamically implement text ellipsis using CSS in conjunction with Angular 7?

i need to display a list of cards in a component, each card has a description coming from the server. In my component.html, I am using a ngFor like this: <div [style.background-image]="'url('+row.companyId?.coverUrl+')'" class="img- ...

cssangulartypescript

Resize the images and align them side by side

I have a container with a maximum width of 1400px. Inside this container, there are two images of different sizes. I want to align them in a row using flexbox so that they fit within the 1400px width and still maintain a visually appealing appearance as sh ...

htmlcssflexbox

Arrange three div elements beside each other with the middle column containing two

My challenge involves figuring out how to display 3 divs on a webpage in a specific layout. Currently, I am able to get 2 divs to align next to each other using the float:left property. However, the third div always ends up positioned below the first one ...

csshtml

Ways to subtly adjust the edges of text in a design

https://i.stack.imgur.com/sr4PF.pngIs there a way to adjust the border of text that already has a border applied? I have successfully created the text with the border using the following CSS: h1 { font-size: 35pt; text-align: center; font-family: ...

csstext

White background with a black border and transparency on an Android device

I'm trying to create a shape that has a white background with a black border. <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shap ...

androidcssshapeslayer-list

Cutting Out Sections of a List

I'm currently working on an app that involves looking up and navigating to specific locations. I've encountered an issue with the coordinates in my code containing a ',0' at the end, which is not compatible with Google Maps. Manually re ...

javascripthtmlarraysangularjsgoogle-maps

Storing user responses on a webpage

I am feeling quite lost in my design and I need some help from a talented programmer who can guide me through this realm which is not exactly my area of expertise. My Current Assets Page - form.html <div style="text-align:left"> <form ...

phphtmlmysql

Use of image tag inside the title attribute

After coming across the question on how to add an image tag inside the title attribute of an anchor tag and finding only one answer claiming it's impossible, I stumbled upon a page where it was actually done: I decided to view the source of the page ...

javascripthtml

What is the correct method to sanitize the data obtained from a text area before inserting it back into the same text area?

When a user enters text into a textarea, it is directly inserted into a mySQL database. To ensure its security, I apply trim, htmlentities, mysql_real_escape_string functions to sanitize the input. Additionally, magic quotes are enabled. However, when it c ...

phpmysqlhtmlformssanitization

When an HTML email is sent from the Outlook 2007 Exchange server, it may appear as plain text when viewed on

After extensive searching, I've come across two old threads with unanswered questions on this topic. In our office, we have a Windows XP PC designated for "production" that sends out emails in HTML format. These emails contain multiple excel Cells for ...

htmliphoneemailplaintext