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对于在div中垂直和水平居中元素非常有用 - ＆gt;按钮以导航栏为中心。我相信这就是你所要求的。您链接的代码笔似乎与您的描述无关。笔似乎只使用position: absolute;

Intro to Flexbox Link

Answer 2

几年前，Flexbox或多或少地保存了网站开发者的位置/浮动/负边缘混乱。即使没有包装也很容易：

.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

Answer 3

您也可以使用表格布局：

＆＃13;

<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>

＆＃13;

application.py

＆＃13;

Answer 4

没有人，你不需要flexbox。这很简单，但它取决于方法（这可能使它变得不必要复杂）。

如果您的搜索区域始终位于左上角，则可以使用position：absolute，并且可以使用REMOVE margin：auto。这本身就将按钮放在与搜索框相同的行上。当你调整大小时，按钮会在搜索框的后面（定位会从正常流程中移除元素，所以基本上按钮现在甚至都不知道搜索框在那里）。您可以通过设置.searchArea甚至是正文的最小宽度来解决此问题。我找到了670-680px来做这个伎俩。我从按钮元素中删除了“margin-top”。它没有任何好处。

print('Tax Category: (A: No Tax, B: 10%, C: 20%, D:29%, E: 35%')
taxbracket = input('Enter A, B, C, D, E:')

while taxbracket.lower() not in ['a', 'b', 'c', 'd', 'e']:
    print('Error: please enter a correct value.')
    taxbracket = input('Enter A, B, C, D, or E:')

.searchArea {
  min-width: 675px;
}

.formWrapper {
  position: absolute; 
}

.formButtons {
  float:right;
}

/*search box*/
.playerInput{
    width: 450px;
    min-width: 300px;
    font-size: 1.3em;
    padding-left: 20px;
    height: 55px;
    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.60);
    color: #111;
    transition: 0.2s ease-in;
}

.upvoteButton {
  border: none;
  /*removed individual floats */
  /*   I have removed the margin from here*/
  height: 55px;
  padding: 8px 24px;
  font-size: 0.8em;
  font-family: "Droid Sans", sans-serif;
  background-color: #00ab9e;
  color: #fff;
  transition: 0.2s ease-out;
}

.downvoteButton {
  border: none;
  /*removed individual floats */
  /*   I have removed the margin from here*/
  height: 55px;
  padding: 8px 24px;
  font-size: 0.8em;
  font-family: "Droid Sans", sans-serif;
  background-color: #fcce66;
  color: #fff;
  transition: 0.2s ease-out;
}

.injuryButton {
  border: none;
  /*removed individual floats */
  /*   I have removed the margin from here*/
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 55px;
  padding: 8px 24px;
  font-size: 0.8em;
  font-family: "Droid Sans", sans-serif;
  background-color: #fb655a;
  color: #fff;
  transition: 0.2s ease-out;
}

.upvoteButton:hover {
  background-color: #02ffb6;
  color: #fff;
  transition: 0.2s ease-out;
}

.downvoteButton:hover {
  background-color: #fbf03e;
  color: #fff;
  transition: 0.2s ease-out;
}

.injuryButton:hover {
  background-color: #fd483a;
  color: #fff;
  transition: 0.2s ease-out;
}

此代码仍然是完美的FAR，我可以更多调整它，但我想给你一个简单快速的解决方案，让你知道从哪里开始。

如果您希望我进一步调整，请告诉我。

如果此解决方案适合您，请考虑接受并提出此答案。

使用CSS组织搜索栏和按钮

4 个答案: