html - 我怎样才能让两个元素彼此相邻？

Question

我有这个 HTML:

.parent{
  border: 1px solid;
  width: 70%;
}

.title{
  width: 50px;
}

.input {
}

<div class="parent">
  <span class="title">title: </span>
  <input class="input" name="title" type="text">
</div>

我需要为 .input 元素设置 width: 100%;。但是当我这样做时，在同一行中会中断.. 我的意思是在那种情况下 .title 和 .input 将不再在同一行中。我怎样才能让它们保持在同一行并填满它们父级 (.parent) 的整个宽度？

注意: There are some ways通过使用 flex 或 calc() .. 但实际上我网站的大多数用户使用旧浏览器。无论如何，我正在寻找一种支持旧浏览器的方法。

Answer 1

如果 flex 不是您的选择，我认为您将不得不使用表格单元格显示:

.parent {
  display: table;
  width: 100%;
  }

.title {
  display: table-cell;
  }

.input {
  display: table-cell;
  width: 100%;
  }

<div class="parent">
  <span class="title">title:</span>
  <input class="input" name="title" type="text">
</div>