Question

我有这个HTML结构（简体）。我想将徽标input和button设为：

1）在标题中垂直对齐

2）徽标和按钮的大小固定。我希望这两个项目中间的input成为它们之间的剩余width。

（左侧是徽标，右侧是button。Input然后是位之间的宽度）

然后，在调整窗口大小时，input文本会自动调整大小。

<div class="header">
    <div id="logo">Logo here</div>
    <input type="text"/>
    <div class="button>Button title</div>
</div>

Answer 1

使用flexbox可以做到这一点，

将display: flex;应用于父级（.header），以便整个容器现在是一个flex元素
在父（align-items:center）中使用.header垂直对齐它们，详情请参阅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>

使div在中间填充剩余空间

1 个答案: