<分区>
<分区>
我有这个 HTML 结构(简体)。我想使 Logo 、input 和 button 为:
1) 在标题中垂直对齐
2) Logo 和按钮具有固定大小。我希望这两个元素中间的 input 是它们之间剩余的 width 。
(Logo在左边，button在右边。Input 然后是中间位的宽度)
然后当窗口调整大小时，input 文本会自动调整大小。
<div class="header">
<div id="logo">Logo here</div>
<input type="text"/>
<div class="button>Button title</div>
</div>
最佳答案
使用 flexbox 你可以做到这一点，
display: flex; 应用到父级 (.header) 因此整个容器现在是一个 flex 元素 .header) 中使用 align-items:center 来垂直对齐它们，参见更多关于 align-items 的信息flex:1(flex-grow:1 flex-shrink:1 flex-basis:0) 到 input 以增加剩余空间.header {
display: flex;
/* justify-content: space-between; */ /* this is optional, because input{flex:1} is doing its job */
align-items:center;
/*demo*/
border:1px solid red;
height:60px;
}
input {
flex: 1;
/*demo*/
margin: 0 10px;
}<div class="header">
<div id="logo">Logo here</div>
<input type="text" />
<div class="button">Button title</div>
</div>关于html - 让div在中间填充剩余空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46857027/