閲覧ありがとうございます。
それほど深刻な問題ではないのですが、
labelで囲った12px以下の文字とラジオボタンを真横に並べる方法
ひいては
appearance: none;を用いずにラジオボタンのデフォルトで付いているmarginを取る方法
はあるのでしょうか?
labelにdisplay:flex;を指定しただけではちょうど良い「真横」にはならないので、
下記コードのようにネガティブマージンでちょうど良い位置にしたりするしかないのでしょうか?
labelでinputを囲わず、id/forで分離させたものをdivか何かで囲い、それにdisplay: flex;とalign-items: center;を指定すれば済む話なのですが、少し気になりましたので…
何か良い方法があれば、教えていただけますと幸いです。
よろしくお願いいたします。
[備考]
ブラウザ:Google Chrome
OS:Windows10
▼CodePen
https://codepen.io/0166/pen/EMqamG
HTML
1<div class="container"> 2 <div class="box"> 3 <p>きれいに横に並ばない</p> 4 <label> 5 <input type="radio">あいうえお(何もしない状態) 6 </label> 7 <label> 8 <input class="s1" type="radio">あいうえお(appearanceはラジオそのものが消える) 9 </label> 10 <label class="s2"> 11 <input class="radio_02" type="radio">あいうえお(flex+align-item) 12 </label> 13 </div> 14 <div class="box"> 15 <p>きれいに横に並ぶ</p> 16 <label class="s2 s3"> 17 <input class="radio_02" type="radio">あいうえお(flex++align-item center+ネガティブマージン) 18 </label> 19 <div class="radio_wrap"> 20 <input type="radio" id="rw"> 21 <label for="rw">あいうえお(input/label分離 親にflex)</label> 22 </div> 23 </div> 24</div>
CSS
1.container { 2 width: 500px; 3 margin: 50px auto; 4 font-size: 12px; 5} 6.box { 7 border: 1px solid #000; 8 margin-bottom: 30px; 9 padding: 0 10px 10px; 10} 11.s1 { 12 -webkit-appearance: none; 13 -moz-appearance: none; 14 appearance: none; 15} 16.s2 { 17 display: flex; 18 align-items: center; 19} 20.s3 input { 21 margin-top: -0.003px; 22} 23.radio_wrap { 24 display: flex; 25}
[ 追記 ]
デフォルトで付いているmarginは、margin: 0;を指定したら普通に消えました。
お騒がせしました...
ただ、どのブラウザでもラジオボタンの上の隙間の方が大きい気がしました。
単純な好奇心で質問させていただきたいのですが、
・上の隙間の方が大きい原因は何かあるのでしょうか?
・「ラジオボタンの見た目をデフォルトのまま変えずに」ラジオボタンの上の余白と下の余白を同じにして、結果右にある日本語の中央にラジオボタンを配置する簡単な方法などは存在したりするのでしょうか...?
もし分かる方がいらっしゃいましたらよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。