divとボタンを同じサイズにする方法は？
ZiiMakc
divが同じサイズでない理由がわかりません：/
サイズは、テキストサイズに基づいて、コンポーネント間で同じである必要があります。
import * as React from "react";
import styled from "styled-components";
export default function App() {
return (
<div style={{ display: "flex" }}>
<Select>Aa</Select>
<Button>Aa</Button>
<Input />
</div>
);
}
const Button = styled.button`
box-sizing: content-box;
min-height: 1.4rem;
display: flex;
justify-content: center;
align-items: center;
font: inherit;
box-shadow: inset 0 0 0 1px blue;
margin: 5px;
padding: 5px 10px;
border: 0;
border-radius: 3px;
transition: all 0.2s ease-out;
user-select: none;
outline: none;
`;
const Input = styled.input`
box-sizing: content-box;
min-height: 1.4rem;
margin: 5px;
vertical-align: middle;
padding: 5px 0;
`;
const Select = styled.div`
box-sizing: content-box;
display: flex;
align-items: center;
box-shadow: inset 0 0 0 1px blue;
padding: 5px 10px;
border-radius: 5px;
`;
dgknca
まず、それぞれに同じ高さを与える必要があります。次に、マージンをリセットするか、すべて同じマージンを与えることができます。これもbox-sizing: border-box;必要です。
button {
box-sizing: content-box;
min-height: 1.4rem;
display: flex;
justify-content: center;
align-items: center;
font: inherit;
box-shadow: inset 0 0 0 1px blue;
margin: 5px;
padding: 5px 10px;
border: 0;
border-radius: 3px;
transition: all 0.2s ease-out;
user-select: none;
outline: none;
}
input {
box-sizing: content-box;
min-height: 1.4rem;
margin: 5px;
vertical-align: middle;
padding: 5px 0;
}
div {
box-sizing: content-box;
display: flex;
align-items: center;
box-shadow: inset 0 0 0 1px blue;
padding: 5px 10px;
border-radius: 5px;
}
div,
button,
input {
box-sizing: border-box;
margin: 0;
}<span style="display:flex">
<input/>
<div>Div</div>
<button>Button</button>
</span>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
- 前の投稿：ルールを強制する場合でも、ワークフローは常に「何もしない」という結果になります
- 次の投稿：別のコレクションからの情報を使用してMongoDBコレクションをフィルタリングするにはどうすればよいですか？
関連記事
Related 関連記事
- 1
Java Swingで同じボタンのサイズを設定する方法は？
- 2
<div> の境界線のサイズを <p> と同じにする方法は?
- 3
マテリアライズCSSボタンの幅をcols12と同じにする方法は？
- 4
親divと同じサイズの子divを配置する方法
- 5
親divと同じサイズの子divを配置する方法
- 6
行レイアウトでqmlラウンドボタンを同じサイズにする方法
- 7
キーボードをビューと同じサイズにする方法
- 8
ラジオボタンリストで列/アイテムリストを同じサイズにする方法-
- 9
ラジオボタンリストで列/アイテムリストを同じサイズにする方法-
- 10
入力テキスト ボックスを段落と同じサイズにする方法は?
- 11
テーブル内のdivを内のテキストと同じサイズにする方法は？
- 12
ボタンをテキストとまったく同じサイズにするにはどうすればよいですか？
- 13
ボタン（ハイパーリンク）を、幅または最大幅のない親ラッパーの子と同じサイズにする
- 14
<td>を<img>と同じサイズに設定する方法
- 15
異なる画面サイズに応じてボタンを設定する方法
- 16
文字列を同じサイズの部分に分割する方法は？
- 17
絶対位置の画像を下の同じ画像と同じサイズ（％、レスポンシブ）にする方法
- 18
ボタン要素と同じ行にパーソナライズされたボタンコンポーネントをレンダリングする方法
- 19
ボタンとfontawesomeアイコンを同じ行に表示する方法
- 20
同じdivの他のボタンに、はるかに大きなボタンの高さサイズを継承させるにはどうすればよいですか？
- 21
AndroidStudioの画面サイズに応じてボタンサイズを調整する方法
- 22
同じプロパティと値を指定しても、ボタンのサイズは異なります
- 23
フレックスボックスのアイテムを同じサイズにする方法は？
- 24
ボタンとテキストを同じ行に配置する方法は？
- 25
ボタンを同じサイズにして、すべてをページの中央に配置するにはどうすればよいですか？
- 26
divをh1と同じスタイルにする方法は？
- 27
ボタンを入力と同じ高さにする方法
- 28
3つのボタンをすべての画面サイズで同じ行に均等に表示するにはどうすればよいですか？
- 29
画面サイズを完全に埋めて、2つのhtmlボタンを同じ幅で1行に水平に配置する方法
コメントを追加