質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

802閲覧

labelで囲った12px以下の文字とラジオボタンを真横に並べる方法

_shizu

総合スコア21

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/03/29 15:54

編集2019/03/30 14:19

閲覧ありがとうございます。
それほど深刻な問題ではないのですが、

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;を指定したら普通に消えました。
お騒がせしました...

ただ、どのブラウザでもラジオボタンの上の隙間の方が大きい気がしました。
単純な好奇心で質問させていただきたいのですが、

・上の隙間の方が大きい原因は何かあるのでしょうか?
・「ラジオボタンの見た目をデフォルトのまま変えずに」ラジオボタンの上の余白と下の余白を同じにして、結果右にある日本語の中央にラジオボタンを配置する簡単な方法などは存在したりするのでしょうか...?

イメージ説明

もし分かる方がいらっしゃいましたらよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

vertical-align: middle;
などで調整するのではダメでしょうか?
vertical-align: 0%;
など、パーセンテージでも調整が可能なので、よきところに収められれば良いと思います。

ただ、試してみましたら、
input要素の高さとして計算しているものが、ブラウザによって異なるような挙動があったり、
フォントによってテキストが持つ「高さ」と文字の位置が微妙に異なるようです。(メイリオが顕著)
質問の画像にあるように「上部の余白が下に比べて大きい」ことについて、どんな閲覧環境でも寸分違わず統一するというのはかなり骨が折れそう、と感じました。

投稿2019/04/02 05:09

marlboro_tata

総合スコア525

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

appearance: none;を用いずにラジオボタンのデフォルトで付いているmarginを取る方法

ラジオボタンはブラウザによって表示が違うため、:checkedを使ったスタイリングなどを使わないと見た目の制御は出来ません。

【CSSでラジオボタンをカスタマイズする方法 | サービス | プロエンジニア】
http://proengineer.internous.co.jp/content/columnfeature/6492

【CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた │ カルチャーアカデミア広島】
https://cultureacademia.jp/webcreate/303/

投稿2019/03/29 17:58

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_shizu

2019/03/30 14:24

ご回答ありがとうございます! また、勝手ながら非常に細かい質問を追記させていただきました。 もうほぼ横並びなので全く問題ないのですが、少しだけ気になったことでしたので、もし原因等ご存知でしたら再度ご回答のほどお待ちしております。
kei344

2019/03/30 14:39

こちらの提示したスタイリング方法ではないようなので、再度回答することが無いのですが・・・。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問