html - 使用 CSS 组织搜索栏和按钮

Question

我正在使用 React 和 Firebase 组合一个小网络应用程序，但我在整理方面遇到了麻烦。

理想情况下，我希望搜索栏和按钮最终位于屏幕中心的一条直线上 — 搜索栏，然后是绿色按钮，然后是黄色按钮，最后是红色按钮。都互相接触。如果页面大小缩小，理想情况下按钮会缩小并与搜索栏保持一致。

HTML

<div class="searchArea">
<div class="formWrapper">
<input class="playerInput" placeholder="Search by player name" />
</div>
<div class="formButtons">
<button class="upvoteButton">&#9650;</button>
<button class="downvoteButton">&#9660;</button>
<button class="injuryButton">&times;</button>
</div>
</div>

这是笔 — https://codepen.io/scottmiller2/pen/bYNPVm

任何方向表示赞赏。我尝试了很多边距调整，但将其设置回默认值并将其放入笔中。我之前已经通过反复试验完成了类似的工作，但我很好奇在准备调整窗口大小时应该如何正确排列这些东西。提前致谢

这是显示搜索部分的代码:

<div className="playersFooter">
<PlayerForm addPlayer={this.addPlayer}/>
</div>

对应的CSS

.playersFooter {
display: flex;
flex: 1 1 5%;
background-color: rgba(0, 0, 0, 0, 0.5);
}

Answer 1

几年前，Flexbox 或多或少地拯救了 position/float/negative-margin 困惑的网络开发者。即使没有包装器也很容易:

.searchArea {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.playerInput {
  width: 450px;
  min-width: 300px;
  font-size: 1.3em;
  padding-left: 20px;
  height: 55px;
  border: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: rgba(34, 49, 63, 0.8);
  color: #fff;
  transition: 0.2s ease-out;
}

.playerInput:focus {
  background-color: rgba(255, 255, 255, 0.6);
  color: #111;
  transition: 0.2s ease-in;
}

button {
  border: 0;
  height: 55px;
  padding: 8px 24px;
  font-family: "Droid Sans", sans-serif;
  color: #fff;
  transition: 0.2s ease-out;
}

.upvoteButton {
  background-color: #00ab9e;
}

.downvoteButton {
  background-color: #fcce66;
}

.injuryButton {
  background-color: #fb655a;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.upvoteButton:hover {
  background-color: #02ffb6;
}

.downvoteButton:hover {
  background-color: #fbf03e;
}

.injuryButton:hover {
  background-color: #fd483a;
}

<div class="searchArea">
  <input class="playerInput" placeholder="Search by player name" />
  <button class="upvoteButton">&#9650;</button>
  <button class="downvoteButton">&#9660;</button>
  <button class="injuryButton">&times;</button>
</div>

浏览器支持:http://caniuse.com/#feat=flexbox

Codepen 链接:https://codepen.io/helb/pen/eemwGp