インライン要素内でテキストを左右に寄せる方法をご存知の方、 ご教示くださいますようお願い致します。
<!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要素などのインライン要素に幅の概念が無い事は承知しておりますが、もしかしたら簡潔に綺麗な表示が出来る方法があるかも?と思い、検索しては試していますが行き詰まりました。
最悪、&nbsp;で埋めて調整しようかとも思いましたが、見た目もソースコードも満足いかなかったので止めました。
何卒宜しくお願い致します。
No.2ベストアンサー
- 回答日時:
<style>
form.hoge select{
font-family:monospace;
}
</style>
<form class="hoge">
<select size="3">
<option>CAPYBARA520</option>
<option>GIANT TOAD795</option>
<option>COYOTE780</option>
</select>
</form>
font-family:monospaceを知らなかったので、おかげ様でいろいろ試せました。
Safariでの表示が難しかったです。ありがとうございました。
No.1
- 回答日時:
>最悪、&nbsp;で埋めて調整しようかとも思いましたが、見た目もソースコードも満足いかなかったので止めました。
いいえ、見た目もソース的にもそれが最も正しいです。
_<form action="./">
__<select name="abc" size="3">
___<input type="radio" value="C520" label="CAPYBARA520">CAPYBARA 520</input type="radio" >
___<input type="radio" value="G795" label="GIANTTOAD795">GIANT TOAD 795</input type="radio" >
___<input type="radio" value="C780" label="COYOTE780">COYOTE 780</input type="radio" >
__</select>
_</form>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブル内でドロップダウンメ...
-
セレクトメニューで2つの項目...
-
<SELECT>タグの折り返し
-
SELECT OPTIONの中身をコピペ...
-
select や option のCSS設定
-
セレクトボックスの内容を中央寄せ
-
インライン要素内でテキストを...
-
【HTML5】selectにrequierd
-
セレクトボックスのselected属...
-
インラインフレーム内へのリンク
-
プルダウンを連続してだしたい...
-
htmlとCSSを使いSelect class ...
-
JSONで文字列が長い時
-
Application.ScreenUpdating = ...
-
formで特定のinputを送信しない...
-
【至急!!!】python言語で本を見...
-
VB6で、長い時間かかる処理...
-
CGIから複数の別プログラムを同...
-
構造体の各データの表示につい...
-
「*:*」って何を意味するのでし...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
文字の横にプルダウンを表示さ...
-
<SELECT>タグの折り返し
-
セレクトメニューで2つの項目...
-
テーブル内でドロップダウンメ...
-
セレクトボックスのselected属...
-
セレクトメニューで選んだ値を...
-
複数列を持ったリストボックス...
-
プルダウンメニューで中央表示
-
セレクトボックスから別窓にジ...
-
SELECT要素の垂直位置
-
selectタグ内の特定のoptionの...
-
プルダウンリストの背景色の指定
-
ドロップダウンリストのselecte...
-
プルダウンのグループ化で、ラ...
-
同じものを繰り返し表示させる
-
HTMLでメディアプレイヤーの再...
-
セレクトボックスの「選択して...
-
セレクトボックスの中を一部隠...
-
インラインフレーム内へのリンク
-
セレクトボックスの内容を中央寄せ
おすすめ情報