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:

https://i.sstatic.net/76giB.png

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

What is the best method to restrict the size of a div to match the dimensions of the

In my webpage, I have a menubar (div) that contains bookmarks. However, when too many bookmarks are added, the menu becomes too wide for the page size I prefer (1280, 720) and becomes scrollable, causing some bookmarks to be out of view. My goal is to ens ...

javascriptjqueryhtmlcss

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

import PageNav from '@/components/PageNav.vue'; import PageFooter from '@/components/PageFooter.vue'; export default { name: 'Groups', components: { PageNav, PageFooter, }, data() { return { groups: ...

javascripthtmlvue.js

Is it possible to add a click event to a table row that contains an input checkbox, without interfering with the ability to click the checkbox itself?

I have a table: <table> <tr> <td>Something</td> <td>Something Else</td> <td><input type='checkbox' value='clickme' id='yes'></td> </tr> When a user ...

javascriptjqueryhtmlcheckbox

Changing the click event using jQuery

My JavaScript snippet is displaying a widget on my page, but the links it generates are causing some issues. The links look like this: <a href="#" onclick="somefunction()">Link</a> When these links are clicked, the browser jumps to the top of ...

javascriptjqueryhtml

Display live data directly from a specific XML tag on a webpage

My project involves working with a local XML file that is being constantly updated by a third party. I am looking to create a web page that can dynamically read and display a specific XML tag without requiring the page to be refreshed. Additionally, I woul ...

javascriptajaxhtml

Using AJAX and PHP to dynamically fill HTML drop-down menus

In order to populate the DropDown controls on my HTML Form dynamically, I have implemented a code that utilizes AJAX to make a call to a .php file. This .php file is responsible for filling the DropDown control with values from a single column. Throughout ...

phpjavascripthtmlajax

Modifying the data attribute within the div does not result in a different image for the 360-degree spin view

My current project involves utilizing js-cloudimage-360-view.min.js to create a 360-degree view of images. I have successfully retrieved the images, but I am encountering difficulty in updating the images by clicking a button. index.html <!DOCTYPE html ...

javascripthtml

Submitting a value to ngForm: A step-by-step guide

I am working on an ngForm within Angular Material that contains several input fields. I want to include a new field called total in the submission, but this field is not an input field. It should be a readonly field and its value needs to come from the Typ ...

htmlangularangular-material

Issues with CSS styling are affecting the display of a form

Hey there! I was working on creating an order form for my website, and everything was going smoothly until I hit a snag while styling the webpage. The problem is that the legends of the form are extending all the way to the right side of the page, and the ...

css

Hover over a child DIV element to dynamically alter the style of its parent DIV element

Attempting to create a simple CSS hover effect. <div class="menu"> <div class="child"></div> </div> <div class="nav"> <div class="item1"></div> </div> The desired outcome is for the style of < ...

htmlhoverparent

Issue with excessive content causing scrolling difficulty

I've created CSS for a modal dialog, but I'm facing an issue. When the content exceeds the vertical space of the wrapper, the scrolling functionality doesn't work correctly. Although I can scroll, it's limited and I can't reach th ...

htmlcss

Searching for the name of dynamically generated input fields using jQuery

I have a straightforward form featuring radio buttons <form> <input type="radio" name="radio_1" value="1" />Radio 1 <input type="radio" name="radio_1" value="2" />Radio 2 <input type="radio" name="radio_1" value="3" />Radio 3 </ ...

javascriptjqueryhtml

Tips for transferring information between two distinct pages utilizing the jQuery POST technique

I'm dealing with two PHP files called card_process.php and payment.php. My goal is to transfer data from the cart_process page to the payment page. Here's a snippet of the code: In cart_process.php: $paynow = "<button type='submit' ...

javascriptphpjqueryhtmljson

Collect the text shown in an alert message created with JavaScript

I'm currently unsure if this is achievable or not. In one of my scenarios, I aim to extract text that appears in alert boxes on external websites by including my JavaScript file. Is there a method to obtain the text content shown in an alert message ...

javascripthtml

The issue of video tags not displaying previews on iPhone across all browsers is also accompanied by problems with controls not functioning correctly

As I delve into the world of HTML5 video tags, I encountered an issue where the video wouldn't show a preview frame initially. Instead, only the Resume button would appear. Furthermore, after playing the video with the Resume button, it wouldn't ...

javascripthtmljquerycssvideo

IE's inconsistent float alignment causing display issues

My challenge is getting my div elements to float correctly in Internet Explorer. They are displaying perfectly in Chrome and Firefox, but IE seems to be messing up the code. The jsfiddle link showcasing the issue can be found here: http://jsfiddle.net/vlya ...

htmlcsswordpressinternet-explorer

Creating a ripple effect on a circle with CSS and HTML when it is clicked

Can anyone assist me in creating a wave effect around the circle when it is clicked? To better visualize what I am trying to achieve, you can view this GIF image. Appreciate your help in advance! ...

javascripthtmlcss

Shifting the form to the bottom right corner

Just starting out with HTML5 and CSS, I've been experimenting with different elements. One project I've been working on is a form: <div id="form1"> <form action="demo_form.asp" autocomplete="on" > Departure City & ...

csshtml

Tips for creating a header.php and footer.php integrated with CSS files

I am in the process of constructing my website using HTML files. I want to make sure that my header and footer sections are dynamic so I can easily modify them without having to update numerous files each time. While I've attempted a few methods based ...

phphtmlcssheaderfooter

Is there a way to utilize jQuery to determine the distance the user has scrolled down?

Looking for some help with changing the style of an element based on scroll position using jQuery. Specifically, I want to add a class name to a div once the user has scrolled beyond 200 pixels and then remove the class name when they scroll back up to l ...

jquerycss