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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2978閲覧

ラジオボタンのCSSでmarginを0に指定しても横いっぱいに取られる

futaba2110

総合スコア16

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/09 13:25

編集2019/03/09 14:47

WordPress上でHTMLとCSSでラジオボタンのあるページを作っています。

ラジオボタンのすぐ右にテキストが来るようにしたいのですが、marginを0に設定しても横いっぱいになってしまい、テキストがラジオボタンの下に行ってしまいます。

!importantなどの指定などは試しましたが、効果ありませんでした。

HTML

1<div class="fields fieldname3_2 cff-radiobutton-field" id="field_2-3"> 2 <label>Select a Choice</label> 3<div class="dfield"> 4 <div class="one_column"><label for="fieldname3_2_rb0"> 5  <input name="fieldname3_2" id="fieldname3_2_rb0" class="field group " value="First Choice" vt="First Choice" type="radio"> 6  <span>First Choice</span> 7 </label> 8</div> 9<div class="one_column"> 10 <label for="fieldname3_2_rb1"> 11  <input name="fieldname3_2" id="fieldname3_2_rb1" class="field group " value="Second Choice" vt="Second Choice" type="radio"> 12  <span>Second Choice</span> 13  </label> 14</div> 15<div class="one_column"> 16 <label for="fieldname3_2_rb2"> 17  <input name="fieldname3_2" id="fieldname3_2_rb2" class="field group " value="Third Choice" vt="Third Choice" type="radio"> 18  <span>Third Choice</span> 19 </label> 20</div>

CSSは特に指定していませんが、画像のように、ラジオボタンだけで横幅いっぱいになってしまい、その下にテキスト(First Choice)が表示される状況です。
イメージ説明
イメージ説明

よろしくお願いします。

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

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

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

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

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

FKM

2019/03/09 13:31

headタグ内のmetaタグはどうなっていますか?
kei344

2019/03/09 13:34

CSSを提示してください。また、インデントが全角なのも修正されたほうがよいと思います。
futaba2110

2019/03/09 13:51

metaタグは以下のようになっています。ご確認お願いします。 <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1">
futaba2110

2019/03/09 13:52

質問に記載したとおり、ラジオボタンに対してのCSSは指定していません。
kei344

2019/03/09 13:59

「ラジオボタンに対して」だけでなく全体のCSSを提示されたほうが状況を再現できる可能性があがるので提案したのですが・・・。
futaba2110

2019/03/09 14:05

全体のCSS提示しようとしましたが、WordPressテーマのものが長すぎて投稿ができませんでした。 テーマはストークを使用しています。
退会済みユーザー

退会済みユーザー

2019/03/09 14:32

Wordpressのカテゴリータグを追加してください その方が早く解決します。
yu-smc

2019/03/09 14:41

質問中の画像にてブラウザツールで要素を指定されていますが、そのときStylesタブに表示されるCSSを見れば原因がわかるのではないでしょうか?
futaba2110

2019/03/09 14:42

WordPressタグ追加しました。
futaba2110

2019/03/09 14:45

もちろんstyleタブの表示されるCSSは確認していますが、marginはbottomの14pxだけにも関わらず横幅いっぱいに広がってしまうので質問しています。 0px !importantなど指定しても改善しません。
guest

回答1

0

ベストアンサー

ストークーテーマのDEMOサイトでいじって試してみたところ、ラジオボタンのスタイルにdisplay:inline-blockを指定したらいけましたがいかがでしょうか。

投稿2019/03/09 14:53

編集2019/03/09 14:54
yu-smc

総合スコア610

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

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

futaba2110

2019/03/09 15:02

解決しました!ありがとうございました。
futaba2110

2019/03/09 15:16

ご丁寧にありがとうございます。それでinline-blockの指定で解決したということですかね。参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問