使用输入框对齐内联元素

Question

我有一系列内联元素（带有输入文本框），可以放在一行中。见下图。

输入框的数量可以变化（通过AJAX动态加载），输入框的标签也是如此。在下面的示例中，长度为x宽x高。

内联元素所在的div是动态宽度，取决于此行上方和下方的内容。

如果出现下面的屏幕截图，我如何让输入框的宽度增加相同，以使内容在两边都合理？有纯CSS解决方案吗？

#!/usr/bin/expect

set timeout 180
set username admin
set password Changeme1
set fildes [open "ips.txt" r]
set ip [gets $fildes]

while {[string length $ip] != 1} {
   spawn ssh $username@$ip
   expect "password:"
   send "$password\r"
   expect ".mi"
   send "show sw\r"
   expect ".mi"
   send "exit\r"
   set ip [gets $fildes]
   }

close $fildes

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

Answer 1

您可以使用flexbox justify-content完成此操作，并将space-around的值分配给包含输入元素的div。

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

如果您尝试支持不支持flexbox的旧版浏览器，您可以选择将每个标签和输入包装在各自的div中，为这些div的封闭父级显示table并为输入div提供table-cell的显示，宽度百分比为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>