インライン要素内でテキストを左右に寄せる方法

2023/08/15 13:56

このQ&Aのポイント

インライン要素内でテキストを左右に寄せる方法をご存知の方、ご教示くださいますようお願い致します。
select要素などのインライン要素に幅の概念が無い事は承知しておりますが、もしかしたら簡潔に綺麗な表示が出来る方法があるかも？と思い、検索しては試していますが行き詰まりました。
最悪、＆ｎｂｓｐ；で埋めて調整しようかとも思いましたが、見た目もソースコードも満足いかなかったので止めました。

ベストアンサー

インライン要素内でテキストを左右に寄せる方法

2011/08/27 19:37

インライン要素内でテキストを左右に寄せる方法をご存知の方、ご教示くださいますようお願い致します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <select size="3"> <option>CAPYBARA 520</option> <option>GIANT TOAD 795</option> <option>COYOTE 780</option> </select> <select size="3"> <option>CAPYBARA 520</option> <option>GIANT TOAD 795</option> <option>COYOTE 780</option> </select> <select size="3"> <option>CAPYBARA 520</option> <option>GIANT TOAD 795</option> <option>COYOTE 780</option> </select> </body> </html> 添付のイメージ画像は、理想の見栄えになるようPhotoshopで加工したものです。 select要素などのインライン要素に幅の概念が無い事は承知しておりますが、もしかしたら簡潔に綺麗な表示が出来る方法があるかも？と思い、検索しては試していますが行き詰まりました。最悪、＆ｎｂｓｐ；で埋めて調整しようかとも思いましたが、見た目もソースコードも満足いかなかったので止めました。何卒宜しくお願い致します。

maelificblaster
お礼率100% (4/4)

HTML
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2011/08/29 12:14 回答No.2

質問者

お礼 2011/09/13 00:47

font-family:monospaceを知らなかったので、おかげ様でいろいろ試せました。 Safariでの表示が難しかったです。ありがとうございました。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/08/28 00:08 回答No.1

＞最悪、＆ｎｂｓｐ；で埋めて調整しようかとも思いましたが、見た目もソースコードも満足いかなかったので止めました。　いいえ、見た目もソース的にもそれが最も正しいです。＿<form action="./"> ＿＿<select name="abc" size="3"> ＿＿＿<input type="radio" value="C520" label="CAPYBARA    520">CAPYBARA 520</input type="radio" > ＿＿＿<input type="radio" value="G795" label="GIANT TOAD  795">GIANT TOAD 795</input type="radio" > ＿＿＿<input type="radio" value="C780" label="COYOTE        780">COYOTE 780</input type="radio" > ＿＿</select> ＿</form>

質問者

お礼 2011/09/13 00:43

どうもありがとうございました。

関連するQ&A

２つのブロック要素をまとめてインライン表示したい。
２つのブロック要素をまとめてインライン表示したい。この質問タイトルが適切かは全く自信がないのですが、例として次のようなHTMLがあるとします。 <body> <div class="container"> <div class="title"> <h1>「タイトル」</h1> </div> <div class="subtitle"> <p>「サブタイトル」</p> </div> </div> </body> 「タイトル」のすぐ横に「サブタイトル」が表示されるようにしたいと思っています。 /* 表示イメージ */ 「タイトル」「サブタイトル」ただし、表示幅に対してタイトルが長いと、タイトルが複数行に渡って表示されます。この場合もタイトルの表示が終わった直後に「サブタイトル」を表示したいです。 /* 表示イメージ */ 「非常に長～～～～～～～～～いタイトル」「サブタイトル」これを実現するにはCSSでどのように記述したらよいのでしょうか？
- ベストアンサー
- HTML
phpでこれは、head要素の中に、meta要
phpでこれは、head要素の中に、meta要素、title要素、link要素が入っているということなんですか？ ↓ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body>
- ベストアンサー
- PHP
プルダウンのメニューを表示を2つ設定。
プルダウンのメニューを表示を2つ設定したいのですが、どこが間違っているのでしょうか。基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>
- ベストアンサー
- JavaScript
質問Aと質問Bを選択して、メッセージを出したい。
質問Aと質問Bを選択して、メッセージを出すプログラムを作っています。ところが、functionについて、引数の場合は2つ同時に使用できますけれども、関数はできないのがネックです。なぜそれが必要かというと、 funcの中にifが入っており、そこで、メッセージの挙動の操作をしているためです。もし、関数を2つ同時に使うとしたらどのようにしたらいいですか。以下はそのjavascript文です。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { var val101 = document.forms.form101.Select101.value; var target = document.getElementById("output101"); if (val101 == "要素101") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output101"></div> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output111"></div> </body> </body> </html>
- ベストアンサー
- JavaScript
jsでプルダウンで選択したものがうまく表示されない
以下のhtml文があります。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function onButtonClick() { var val = document.forms.form1.textBox1.value; var target = document.getElementById("output"); if (val == "Penguin") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form action="" id="form1"> <div>"Penguin"と入力してください。</div> <input id="textBox1" type="text" value="" /> <input type="button" value="Exec" onclick="onButtonClick();" /> </form> <div id="output"></div> </body> </html> Penguinと入力すると合っていますと表示が出ます。これを、プルダウン方式にしました。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value1; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> </html> これにすれば、要素１を選択すれば、会っていますと表示されるのですが、されません。どうしたら改善されますか。
- ベストアンサー
- JavaScript
プルダウンを2個選び、その結果に基づき、値を返す。
プルダウンを2個選び、その結果に基づき、値を返したいです。以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、紐づけができません。ですので、打開案をご教授願えたら幸いです。
- 締切済み
- JavaScript
全てのselect要素をデフォルトの値に戻す方法
ページを開いたときは、全てのselect部分ではデフォルトが表示されます。選択後にブラウザを更新させずに、全てをデフォルトに戻すためにはどのようにしたらよいのでしょうか。 html側でselected="selected"とする方法がありますが、ブラウザによって対応していなかったりしたので、他に確実な方法を知りたいです。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>全てのselectをデフォルトにする</title> </head> <body> <form> <select name="s0" onclick="f(this.form)"> <option value="デフォルト" selected="selected">デフォルト</option> <option value="A">A</option> <option value="B">B</option> </select> <select name="s1" onclick="f(this.form)"> <option value="デフォルト" selected="selected">デフォルト</option> <option value="あ">あ</option> <option value="い">い</option> </select> <select name="s2" onclick="f(this.form)"> <option value="デフォルト" selected="selected">デフォルト</option> <option value="a">a</option> <option value="b">b</option> </select> </form> <script> function f(fff){ var aaa = [] var fel; var sl = document.getElementsByTagName('select').length; for(i=0; i<sl; i++){ fel = fff.elements["s"+i]; //デフォルトかそうでないかをdefaultSelectedで判断 aaa[i] = fel.options[fel.selectedIndex].defaultSelected; if( aaa[i] == false ){ //false（=デフォルトでない）場合はデフォルトに戻す aaa[i] = true; } //戻り値をかえして全てをデフォルトにする return aaa[i]; } } </script> </body> </html>
- ベストアンサー
- JavaScript
innerhtmlで出た値から、ifで返り値を出す
innerhtmlで出た値から、要素を判断し、if文で返り値を求めることは可能でしょうか。具体的にはinnerhtmlで、2未満の数値が出た場合、りんごを、4未満であればみかんと返すようにいたしたいです。なお、回答が長くなることから、script文のみの記述でOKですが、 script文は省略なさらないでください。  <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { judge(); } function selectboxChange111() { judge(); } function judge() { /* この場合は、varではなくletを使う。*/ let val101 = document.forms.form101.Select101.value; let val111 = document.forms.form111.Select111.value; /* そもそも両方が当てたら、メッセージを出すのなら、outputは1つでいいのでは？ */ let target = document.getElementById("output201"); let target2 = document.getElementById("output202"); if ((val101 == "要素101")&&(val111 == "要素111")) { target.innerText = "合っています。"; target2.innerText = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output201"></div> <div id="output202"></div> <div id="output203"></div> <div id="output204"></div> <div id="output205"></div> </body> </body> </html>
- ベストアンサー
- JavaScript
2個選択することで初めて表示というのができない
<!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (value == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // function selectboxChange11() { var value = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (value == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> ↑はjsの分ですが、 2個選んだら初めてイベントが発生するプログラムを作成しているのですが、いかんせんうまくいきません。恐らく、var value = document.forms.form1.Select1.value;のところで、躓いているのだと思います。 document.formsにカンマをつけてみたり、さらに、両端に[]をつけてみたり、いろいろ試しましたが、うまくいきません。それとも、重ねること自体ができないのでしょうか。どうしたらいいのでしょうか。
- 締切済み
- JavaScript
DOM の要素の数え方について
同じクラス名のついた、子要素の数え方を回答いただければと思います。 1. li タグが 5つあるので、そのような出力にしたいのです。 2. 各 ul の li タグの数を出すには、どのようにすればよいのでしょうか ? どうぞ、皆様よろしくおねがいいたいします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> <ul class="myClass"> <li>1</li> <li>2</li> </ul> <ul class="myClass"> <li>3</li> <li>4</li> <li>5</li> </ul> <script> try { var chiledNodes = []; function userFunc( parent ) { chiledNodes = document.querySelector( parent ).children; alert ( chiledNodes.length ); } } catch( e ) { alert( e ); } userFunc( '.myClass' ); </script> </body> </html>
- ベストアンサー
- JavaScript

インライン要素内でテキストを左右に寄せる方法

インライン要素内でテキストを左右に寄せる方法