Question

我有两个div。一个文本框和另一个按钮。我无法垂直对齐两个div。我需要文本框和按钮的高度相等，并在同一行垂直对齐。有什么问题？

＆＃13;

.inputHolder{
  border:1px solid #FFF;
	vertical-align:middle;
}
.input{
	margin-top:150px;
	width:100px;
	height:50px;
	border:1px solid black;
	font-size:1.2em;
	padding:5px;
	display:inline-block;
}
.input:focus{
	outline:0;
}
.goBtn{
	height:50px;
	width:200px;
	border:1px solid black;
	display:inline-block;
}

＆＃13;

<html>
<body>
		<div class="inputHolder">
			<input type="text" class="input">
			<input type="submit" value="Go" class="goBtn">
		</div>
</body>
</html>

＆＃13;

Answer 1

在父级上显示flex将使它们具有相同的高度并排并列

.inputHolder {
  border: 1px solid #FFF;
  display: flex;
  justify-content: center;
}

.input {
  width: 100px;
  border: 1px solid black;
  font-size: 1.2em;
  padding: 5px;
}

.input:focus {
  outline: 0;
}

.goBtn {
  width: 200px;
  border: 1px solid black;
}

<div class="inputHolder">
  <input type="text" class="input">
  <input type="submit" value="Go" class="goBtn">
</div>

Answer 2

这是你想要的sample form吗？

CSS

 .inputHolder {
  border: 1px solid #FFF;
  vertical-align: middle;
}

.input {
  margin-top: 150px;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  /* font-size: 1.2em; */
  padding: 0 5px;
  display: inline-block;
}

.input:focus {
  outline: 0;
}

.goBtn {
  height: 52px;
  width: 200px;
  border: 1px solid black;
  display: inline-block;
}

HTML

<div class="inputHolder">
  <input type="text" class="input">
  <input type="submit" value="Go" class="goBtn">
</div>

Answer 3

你想这样做吗？

https://jsfiddle.net/pm3kpgL7/1/

如果你想要vertical-align个元素，那个属性需要放在那个元素上，而不是放在他的父元素上，所以我只是将垂直对齐移动到输入，它使用vertical-align: sub

.inputHolder{
  border:1px solid #FFF;
  text-align:center;
}
.input{
    margin-top:150px;
    width:100px;
    height:50px;
    border:1px solid black;
    font-size:1.2em;
    padding:5px;
    display:inline-block;
    vertical-align:sub;
}
.input:focus{
    outline:0;
}
.goBtn{
    height:50px;
    width:200px;
    border:1px solid black;
    display:inline-block;
}

无法在一行

3 个答案: