0
ReactとFirebaseを使用して小さなWebアプリケーションを作成していて、問題が発生しています。CSSで検索バーとボタンを整理する
理想的には、検索バーとボタンを画面の中央に検索バー、緑色のボタン、黄色、赤色の順に並べることが理想的です。すべてはお互いに触れている。ページサイズが縮小されている場合、ボタンは理想的には縮小され、検索バーと並んでいます。
HTML
<div class="searchArea">
<div class="formWrapper">
<input class="playerInput" placeholder="Search by player name" />
</div>
<div class="formButtons">
<button class="upvoteButton">▲</button>
<button class="downvoteButton">▼</button>
<button class="injuryButton">×</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);
}
これは、コードペンでは、非常にうまく並んでいます。しかし、リアクションコードでビジュアルスタジオにスローすると、画面の左側に検索ボックスが固定され、セクションのすぐ下に表示されます。私は、検索コンテンツがplayersFooterというクラスに入っていることを知っています。これにはフレックスCSSがいくつかあります。最初の投稿を編集し、それに含まれるCSSを含めました。 playersFooterクラスを削除（または変更）した場合、検索バーは画面の中央に表示されますが、他のサイトコンテンツは表示されません。 – idlehand
私はあなたのアライメントとplayersFooterにセンターを正当化し、それが必要な場所のすぐ近くに配置しました。私はそれがすると思います！助けてくれてありがとう！ – idlehand
申し訳ありません、私は眠っていました。 :)スニペットで、 '.searchArea'に 'min-height：100vh'を追加したので、ビューポート全体の高さをとり、他の要素を押し出します。 – helb