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>

我需要为width: 100%;元素设置.input。但是当我这样做时，处于相同的换行符......我的意思是在这种情况下，.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>

Answer 2

Flexbox是最好的方式，但如果你不能使用它，还有其他一些选择。如果您可以将.title元素更改为使用百分比而不是50px宽度，则可以使用float实现您想要的效果。

＆＃13;

.parent {
  border: 1px solid;
  width: 70%;
}

/* Micro clearfix so the parent does not collapse */
.parent:after {
  content: ' ';
  clear: both;
  display: inline-block;
}

.title {
  float: left;
  width: 15%;
}

.input {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  float: left;
  width: 85%;
}

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

.parent{
  border: 1px solid;
  width: 70%;
  display:table;
  padding: 0 10px;
}

.title,
.input{
  display: table-cell;
}

.input {
  width:100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
}

＆＃13;

如何将两个元素保持在一起？

3 个答案: