0

I'm trying to align select boxes to some degree so it doesn't look so staggered. They all don't have to be aligned, but it would be nice to get the ones that are fairly close aligned. I would prefer to use html to do this. I found this thread, but there wasn't much for examples:

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>

5 Answers 5

0

You can achieve this by making each "row" in the fieldset display: flex and give the select box containers a margin-left: auto:

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>

0

You need to change those .leftcolumn elements from display: inline to display: inline-block. Then you can apply a width to it (which won't be effective on inline elements, but on inline-blocks), which will make it look the way you want:

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

You wrote that you would like to use only HTML: You can as well apply thse settings as inline-styles to each of the eements, but it's more complicated, and with a seperate CSS rule you can change the width for all of them at once if needed.

0

Set your parent div with class of wrapperSection to display: flex, u can also set the flex direction to rows if you want it aligned horizontally or set it to column if you want it aligned vertically. I also found this link useful https://www.w3schools.com/css/css3_flexbox.asp i hope this helps

0

Usually when these boxes are set to be on the div element, this element has the attributes of being a “block” element. Otherwise, display content as Block. I hope you find this helpful?

0

Here is some example code with the typical ways of laying out select boxes. The debate is out on which is best, but I think that the first option is best for small screens while the last option is the easiest to scan on desktop (but many designers don't like the staggered left edge). The column examples use flex, but could also be achieved using a table or other layout css (except #2 - flex is the only way to do that easily).

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.