Ensure that the select boxes are aligned in a horizontal manner

I am currently attempting to adjust the alignment of select boxes to reduce the staggered appearance. While not all need to be perfectly aligned, it would be ideal to have those that are close enough in alignment. I prefer using HTML to accomplish this task. Although I came across this thread, there were limited examples provided:

For reference, here is a link to a fiddle:

<body>
 <form>
    <div id="test" class="page four">
     <fieldset class="wrapSection">
        <legend><b>Config</b></legend>
        <div id="blank"><div class="leftcolumn" style="display: inline"><b>Select 1: </b></div><span><select id="select_1"></select></span></div>
        <div id="select_2_div"><div class="leftcolumn" style="display: inline"><b>On Select 2: </b></div><span><select id="select_2"></select></span></div>
        <div id="select_3_div"><div class="leftcolumn" style="display: inline"><b>Mot Select 3: </b></div><span><select id="select_3"></select></span></div>
        <div id="select_4_div"><div class="leftcolumn" style="display: inline"><b>Really Long Label:</b></div><span><select id="select_4"></select></span></div>
        <div id="select_5_div"><div class="leftcolumn" style="display: inline"><b>Short: </b></div><span><select id="select_5"></select></span></div>
     </fieldset>
    </div>
 </form>
</body>
htmlcssalignment

Answer №1

To achieve the desired layout, set each "row" within the fieldset to have a display: flex property and apply margin-left: auto to the select box containers:

fieldset>div:not(legend) {
  display: flex;
}

fieldset>div:not(legend)>*:nth-child(2) {
  margin-left: auto;
}
<div id="test" class="page four">
  <fieldset class="wrapSection">
    <legend><b>Config</b></legend>
    <div id="blank">
      <div class="leftcolumn" style="display: inline"><b>Select 1: </b></div><span><select id="select_1"></select></span></div>
    <div id="select_2_div">
      <div class="leftcolumn" style="display: inline"><b>On Select 2: </b></div><span><select id="select_2"></select></span></div>
    <div id="select_3_div">
      <div class="leftcolumn" style="display: inline"><b>Mot Select 3: </b></div><span><select id="select_3"></select></span></div>
    <div id="select_4_div">
      <div class="leftcolumn" style="display: inline"><b>Really Long Label:</b></div><span><select id="select_4"></select></span></div>
    <div id="select_5_div">
      <div class="leftcolumn" style="display: inline"><b>Short: </b></div><span><select id="select_5"></select></span></div>
  </fieldset>
</div>

Answer №2

If you want to achieve the desired look, make sure to update the .leftcolumn elements by changing their CSS property from display: inline to display: inline-block. Once that's done, you can set a specific width using the width property (which works for inline-block elements, not inline ones) to get the desired effect:

.leftcolumn {
  display: inline-block;
  width: 160px;
}
<form>
  <div id="test" class="page four">
    <fieldset class="wrapSection">
      <legend><b>Config</b></legend>
      <div>
        <div class="leftcolumn"><b>Select 1: </b></div><span><select id="select_1"></select></span></div>
      <div id="select_2_div">
        <div class="leftcolumn"><b>On Select 2: </b></div><span><select id="select_2"></select></span></div>
      <div id="select_3_div">
        <div class="leftcolumn"><b>Mot Select 3: </b></div><span><select id="select_3"></select></span></div>
      <div id="select_4_div">
        <div class="leftcolumn"><b>Really Long Label: </b></div><span><select id="select_4"></select></span></div>
      <div id="select_5_div">
        <div class="leftcolumn"><b>Short: </b></div><span><select id="select_5"></select></span></div>
    </fieldset>
  </div>
</form>

For those who prefer HTML-only solutions, applying these styles directly to each element is also an option, but it may get complex. Using a separate CSS rule allows for easier management of changes like adjusting the width globally when necessary.

Answer №3

Make sure to designate your parent div as wrapperSection and utilize the display: flex property. You have the option to specify the flex direction as rows for horizontal alignment or columns for vertical alignment. For more detailed information, check out this helpful link: https://www.w3schools.com/css/css3_flexbox.asp. I hope this clears things up!

Answer №4

Commonly, when these containers are designated to the div element, this element typically possesses the characteristics of a "block" element. Otherwise, it displays content as a block. I trust you will benefit from this information?

Answer №5

Exploring various layout options for select boxes can be both intriguing and perplexing. Some argue that the first layout is optimal for small screens, while others favor the last option due to its desktop-friendly design (despite concerns about the staggered left edge). The use of flex in column examples adds flexibility, although alternative methods like tables or custom CSS layouts could also achieve similar results (with the exception of #2, which necessitates the use of flex).

form {
  margin-bottom: 32px;
}
select {
  width: 100%;
  height: 32px;
  padding: 8px 4px;
  margin-bottom: 8px;
}

.form-group {
  margin-bottom: 10px;
}

label {
  font-weight: bold;
}

.side-by-side-varied .form-group {
  display: flex;
}
.side-by-side-varied label {
  white-space: nowrap;
  line-height: 32px;
  margin-right: 15px;
}

.side-by-side-fixed .form-group {
  display: flex;
}
.side-by-side-fixed label {
  white-space: nowrap;
  line-height: 32px;
  width: 210px;
}

.side-by-side-fixed-right .form-group {
  display: flex;
}
.side-by-side-fixed-right label {
  white-space: nowrap;
  line-height: 32px;
  width: 210px;
  text-align: right;
  margin-right: 15px;
}
<div style="width:480px;margin:0 auto">
  <form class="stacked">
    <div id="test" class="page four">
      <fieldset class="wrapSection">
        <legend>Config</legend>
        <div id="blank" class="form-group">
          <label>Select 1:</label>
          <select id="select_1">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_2_div" class="form-group">
          <label>On Select 2:</label>
          <select id="select_2">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_3_div" class="form-group">
          <label>Mot Select 3:</label>
          <select id="select_3">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_4_div" class="form-group">
          <label>Really Long Label:</label>
          <select id="select_4">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_5_div" class="form-group">
          <label>Short:</label>
          <select id="select_5">
            <option>Select one...</option>
          </select>
        </div>
      </fieldset>
    </div>
  </form>

  <form class="side-by-side-varied">
    <div id="test" class="page four">
      <fieldset class="wrapSection">
        <legend>Config</legend>
        <div id="blank" class="form-group">
          <label>Select 1:</label>
          <select id="select_1">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_2_div" class="form-group">
          <label>On Select 2:</label>
          <select id="select_2">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_3_div" class="form-group">
          <label>Mot Select 3:</label>
          <select id="select_3">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_4_div" class="form-group">
          <label>Really Long Label:</label>
          <select id="select_4">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_5_div" class="form-group">
          <label>Short:</label>
          <select id="select_5">
            <option>Select one...</option>
          </select>
        </div>
      </fieldset>
    </div>
  </form>

  <form class="side-by-side-fixed">
    <div id="test" class="page four">
      <fieldset class="wrapSection">
        <legend>Config</legend>
        <div id="blank" class="form-group">
          <label>Select 1:</label>
          <select id="select_1">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_2_div" class="form-group">
          <label>On Select 2:</label>
          <select id="select_2">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_3_div" class="form-group">
          <label>Mot Select 3:</label>
          <select id="select_3">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_4_div" class="form-group">
          <label>Really Long Label:</label>
          <select id="select_4">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_5_div" class="form-group">
          <label>Short:</label>
          <select id="select_5">
            <option>Select one...</option>
          </select>
        </div>
      </fieldset>
    </div>
  </form>

  <form class="side-by-side-fixed-right">
    <div id="test" class="page four">
      <fieldset class="wrapSection">
        <legend>Config</legend>
        <div id="blank" class="form-group">
          <label>Select 1:</label>
          <select id="select_1">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_2_div" class="form-group">
          <label>On Select 2:</label>
          <select id="select_2">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_3_div" class="form-group">
          <label>Mot Select 3:</label>
          <select id="select_3">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_4_div" class="form-group">
          <label>Really Long Label:</label>
          <select id="select_4">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_5_div" class="form-group">
          <label>Short:</label>
          <select id="select_5">
            <option>Select one...</option>
          </select>
        </div>
      </fieldset>
    </div>
  </form>

  <form class="side-by-side-varied">
    <div id="test" class="page four">
      <fieldset class="wrapSection">
        <legend>Config</legend>
        <div id="blank" class="form-group">
          <label style="width:125px">Select 1:</label>
          <select id="select_1">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_2_div" class="form-group">
          <label style="width:125px">On Select 2:</label>
          <select id="select_2">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_3_div" class="form-group">
          <label style="width:125px">Mot Select 3:</label>
          <select id="select_3">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_4_div" class="form-group">
          <label>Really Long Label:</label>
          <select id="select_4">
            <option>Select one...</option>
          </select>
        </div>
        <div id="select_5_div" class="form-group">
          <label>Short:</label>
          <select id="select_5">
            <option>Select one...</option>
          </select>
        </div>
      </fieldset>
    </div>
  </form>

</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

The Bootstrap v5 dropdown feature is malfunctioning as the drop-down menu fails to appear

I've been struggling to create a dropdown menu using Bootstrap, but it doesn't seem to be working as expected. Despite that, I have no issues utilizing the framework for styling purposes. The Bootstrap js link is placed at the bottom of the body ...

htmlcssbootstrap-5

Prevent automatic jumping to input fields

Can someone help me with a problem related to the html input tag or primefaces p:input? I am facing an issue where the cursor always automatically jumps into the input field. The height of my page is such that scrolling is required, and the input field i ...

javascripthtmlprimefaces

Issues with table formatting and malfunctioning functions

I created a basic tic-tac-toe game, but I'm having an issue with the table display. It appears squished when the game loads. Is there a way to prevent this and keep the table empty? Additionally, I am using NotePad++ and encountering problems running ...

javascripthtmlfunctionfirefoxhtml-table

Load HTML 5 video on a webpage after all other elements have finished loading

Hello there! I'm trying to figure out a way to load an HTML 5 video after the page has already loaded. Currently, the video pauses all site interaction until it's fully loaded, but I'd prefer to have it display an image first and then autopl ...

jqueryhtmlhtml5-video

Can someone please explain how I can extract and display information from a database in separate text boxes using Angular?

Working with two textboxes named AuthorizeRep1Fname and AuthorizeRep1Lname, I am combining them in typescript before storing them as AuthorizeRep1Name in the database. Refer to the image below for the result. This process is used to register and merge the ...

htmlsql-serverangulartypescript

I am looking for a way to have one element as a child of another element without automatically adopting specific properties

https://i.sstatic.net/iuNB7.png <span id="priority-dot-open-menu"> <span id="priority-menu"> <span class="tooltip-top"></span> <span id="priority-dot-blue">& ...

cssbootstrap-4

What is the best way to style HTML content with MathJax following its retrieval with jQuery.load?

I recently encountered an issue while using jQuery.load to load a new page. The content on the original page is being treated strangely in some way. Specifically, I have code on the original page that formats LaTeX commands with MathJax: <script type=" ...

javascriptjqueryhtmlmathjax

Issue in Chrome when using CSS clip property on nested div elements

Take a look at this fiddle Here is the HTML structure: <div class="parent"> <div class="child"></div> </div> This is the corresponding CSS code: .parent { position: absolute; width: 100px; height: 100px; background: re ...

htmlcssgoogle-chrome

CSS an act of misbehavior

I have noticed some unusual behavior on my website page. My website design can be viewed at Also, here is the same design in CMS format Please pay attention to the section under <div class="godelpage"> <a href="http://ryugaku.babonmultimedia ...

htmlcss

Implementing a filter in React with data fetched from MongoDB

Hey there! I'm encountering an issue while using the code in Project.jsx and ProductList.jsx. Every time I run the code, it gives me this error message: Warning: Each child in a list should have a unique "key" prop. Check the render method of Product ...

javascripthtmlnode.jsreactjsmongodb

Leveraging JavaScript's Document.write() function to generate an HTML hyperlink

I am struggling with a URL stored in a variable (var URL). My initial attempt was this: document.write("<a href='"+url+"'>LINK</a>"); Unfortunately, it is not working as expected. Any suggestions on how to fix this? This is the ex ...

javascripthtml

Exploring the dynamic world of Angular2 animations paired with the

In my layout, I have a row with three columns and two buttons to toggle the visibility of the side panels: col-md-3 col-md-7 col-md-2 ------------------------------------ | | | | | left | middle panel | | ...

csstwitter-bootstrapangularangular2-animation

Optimizing Material UI Themes: Adjusting the spacing between labels and inputs for improved design

Currently, I am in the process of updating my MUI themes using the overrides functionality. This is how my input field looks like: https://i.sstatic.net/OFAGf.png I am looking to increase the space between the label and the input field. Below is the co ...

cssmaterial-uimaterial-designoverridingthemes

Integrate the user input data into a modal window using Bootstrap

Looking for a solution to a problem, I'm trying to implement a system on my website that sends messages to registered users. After creating a form with necessary information, clicking the send button should display a preview of the message before send ...

phphtmltwitter-bootstrap

The onChange function is not triggered when the dropdown menu consists of only one item

I am facing an issue with my dynamically populated dropdown menu. When the dropdown contains only one element, the onChange() function of my select tag does not work as expected. It functions perfectly fine when there are multiple elements present. How c ...

javascripthtmlreactjs

What is the best way to remove the empty space on the right side of a webpage while ensuring it remains responsive?

I noticed that there seems to be some extra space on the right side of the layout. I'm not sure how to adjust the Bootstrap code or CSS to fix this issue, or if I need to apply margin 0 or padding 0 somewhere in the code. * { box-sizing: border-b ...

htmlcssbootstrap-5

What could be the reason for the presence of a white border in the footer section?

I am trying to create a div in the footer that sits side by side, but the current code is causing it to have an unwanted white border. <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #botto ...

htmlcss

Tips for maintaining row position while zooming your browser above 100% with Bootstrap

I am experiencing a small issue with the bootstrap grid system. I have set up a row with two sections using col-md-6. However, when I zoom in my browser to over 100%, the Close label and input move to the next line. I want them to stay in the same place re ...

htmltwitter-bootstrap

Showcase every piece of model information on the HTML website

I'm currently in the process of creating a website that features both products and categories. Within each product page, there is an option to click on a button that will display a list of all the categories that particular product belongs to. Additi ...

pythonhtmldjango

Is your localhost contact form experiencing issues?

I am receiving an error even though I believe I have done everything correctly. I am currently using localhost, could that be the issue? If not, what else could it be? The error is occurring on this line: $name = $_POST['name']; Here is the co ...

phphtmlformsemail