Question

我需要将标签并排排列到选择框。问题是选择框会随机改变高度。我希望标签调整其高度，并在选择输入调整大小时自动垂直对齐。这就是我到目前为止所做的：

.container {
  width: 400px;
  display: table;
}
.left {
  float: left;
  width: 40%;
  text-align: right;
  display: table-cell;
  vertical-align: middle;
}
.right {
  float: left;
  width: 60%;
  display: table-cell;
  vertical-align: middle;
}
select {
  height: 30px;
}

<div class="container">
  <div class="left">
    <span>Guest 1:</span>
  </div>
  <div class="right">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>
</div>

感谢您的帮助，如果您需要更多信息或更多详情，请与我们联系。谢谢

更新：我无法在标记中使用table或form

Answer 1

你有一些额外的CSS属性，你并不需要像所有与显示表相关的属性。这里的主要元凶是你的标签DIV与SELECT列表的高度不同。只要您的标签中没有多行文本，那么最简单且最可能的解决方案是将标签的高度设置为等于SELECT列表的高度。您希望这样做的方法是使用等于SELECT列表高度的line-height属性，如下所示。

.container {
  width: 400px;
}
.container > div {
  float: left;
}
.left {
  width: 40%;
  text-align: right;
  line-height: 30px;
}
.right {
  width: 60%;
}
select {
  height: 30px;
}

<div class="container">
  <div class="left">
    <span>Guest 1:</span>
  </div>
  <div class="right">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>
</div>

Answer 2

只需摆脱两个花车，它就会起作用。您将容器显示为表格单元格，因此请使用text-align: left

我不能排列或垂直对齐div元素，以便它们自动调整大小

2 个答案: