CODEWITHSUNDEEP
javascripthtmlcss
Snowball
Snowball

Reputation: 1248

Justify Inline elements with Input Boxes

I have a series of inline elements (with input text boxes) that should fit within one row. See picture below.

The number of input boxes can vary (dynamically loaded via AJAX), as can the labels of the input boxes. In the example below, it is length x width x height.

The div that the inline elements are in is a dynamic width, which depends on the content above and below this row.

In the event of the screenshot below, how can I get the input boxes to equally increase in width so that the content is justified on both sides? Is there a pure CSS solution?

enter image description here

.dynamicWidth {
  background-color: green;
  height: 400px;
  position: absolute;
}
<div class="dynamicWidth">
  <div>
    <select>
      <option>This could be longer or shorter dependending on what is dynamically loaded</option>
    </select>
  </div>
  <hr>
  <div>
    <span>Length</span>
    <input type="text" placeholder="length"><span> x Width</span>
    <input type="text" placeholder="width"><span> x Height</span>
    <input type="text" placeholder="height">
  </div>
</div>

Upvotes: 0

Views: 56

Answers (1)

Carl Edwards
Carl Edwards

Reputation: 14454

You can accomplish this using flexbox's justify-content and assigning the value of space-around to the div containing the input elements.

.dynamicWidth {
  background-color: green;
  width: 100%;
  height: 400px;
  position: absolute;
}

.dynamicWidth div:nth-of-type(2) {
  display: flex;
  justify-content: space-around;
}
<div class="dynamicWidth">
  <div>
    <select>
      <option>This could be longer or shorter dependending on what is dynamically loaded</option>
    </select>
  </div>
  <hr>
  <div>
    <span>Length</span>
    <input type="text" placeholder="length"><span> x Width</span>
    <input type="text" placeholder="width"><span> x Height</span>
    <input type="text" placeholder="height">
  </div>
</div>

If you're trying to support legacy browsers that don't support flexbox your alternative option would be to wrap each label and input in their own respective divs, give the enclosing parent of those divs a display of table and give the input divs a display of table-cell with width percentages of 33.3% (1/3s).

.dynamicWidth {
  background-color: green;
  width: 100%;
  height: 400px;
  position: absolute;
}

.dynamicWidth div:nth-of-type(2) {
  display: table;
  width: 100%;
}

.input-container {
  width: 33.3%;
  display: table-cell;
}
<div class="dynamicWidth">
  <div>
    <select>
      <option>This could be longer or shorter dependending on what is dynamically loaded</option>
    </select>
  </div>
  <hr>
  <div>
    <div class="input-container">
      <span>Length</span>
      <input type="text" placeholder="length">
    </div>
    
    <div class="input-container">
      <span> x Width</span>  
      <input type="text" placeholder="width">
    </div>
    
    <div class="input-container">
      <span> x Height</span>
      <input type="text" placeholder="height">
    </div>
  </div>
</div>

Upvotes: 2

Related Questions