- ベストアンサー
input きれいに並べたい
IEを使っているのですが このボックスをきれいに並べる事はできないのでしょうか？ 何か良い案はありますか？ <input type="button" value="あ行" onClick="location='#あ行'"/> になっています。 今は若干ずれてしまいます。 ファイアフォックスやオペラでも若干ずれます。 1個1個テーブルの中に入れるしかないでしょうか？
- XDSVXOKWNUUA
- お礼率100% (28/28)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ソースを見る限り、単なるページないリンクのようにしか見えませんが？ なら、ちゃんと<a href="#A">とすべきです。 （リンク先にする場合は使用できる文字に制限があります。IDと同じ名前空間を持ちます） inputを使うべきではありません。javascriptが無効なユーザーや、検索エンジンにはリンクの情報が伝わりません。 それが、ずれるのは、プロポーショナルフォントだからです。 しかし、リンクで記述し、スタイルシートでデザインすれば幅を指定できますから問題ないはずです。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) のDATAタブで検証済みShift_JISのHTML4.01strictです。 ★デザインはスタイルシートに任せてあるので、先で自由にデザインの変更が可能です。 ボタンだろうが、ドロップダウンメニューだろうが・・ご随意に ★タブは＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- #INDEX{ display:block;padding:0; position:fixed;top:100px;width:25em; line-height:2em;font-size:0.8em;text-align:center; } #INDEX ol{margin:0;padding:0;} #INDEX li{list-style:none;} #INDEX li a{ display:block; list-style:none;width:4em; float:left; border:solid 1px gray;border-radius:0.5em; margin-left:0.5em;margin:0.2em;text-decoration:none; background-color:silver; background:linear-gradient(white,silver); } #INDEX li a:hover{background-color:white; background: linear-gradient(white,rgb(220,220,220));} #INDEX li{clear:left;} #INDEX li ol li{clear:none;} div.section h2,div.section div.section{margin-left:20em;} div.section div.section{border:solid 1px blue;} div.section div.section div.section{min-height:300px;margin-left:0;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<ol id="INDEX"> ＿＿＿<li><a href="#A">あ行</a> ＿＿＿＿<ol> ＿＿＿＿＿<li><a href="#I">い</a></li> ＿＿＿＿＿<li><a href="#U">う</a></li> ＿＿＿＿＿<li><a href="#E">え</a></li> ＿＿＿＿＿<li><a href="#O">お</a></li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li><a href="#K">か行</a> ＿＿＿＿<ol> ＿＿＿＿＿<li><a href="#KI">き</a></li> ＿＿＿＿＿<li><a href="#KU">く</a></li> ＿＿＿＿＿<li><a href="#KE">け</a></li> ＿＿＿＿＿<li><a href="#KO">こ</a></li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li><a href="#S">さ行</a> ＿＿＿＿<ol> ＿＿＿＿＿<li><a href="#SI">し</a></li> ＿＿＿＿＿<li><a href="#SU">す</a></li> ＿＿＿＿＿<li><a href="#SE">せ</a></li> ＿＿＿＿＿<li><a href="#SO">そ</a></li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿</ol> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="section" ID="A"> ＿＿＿<div class="section"> ＿＿＿＿<h3>あ</h3> ＿＿＿</div> ＿＿＿<div class="section" ID="I"> ＿＿＿＿<h3>い</h3> ＿＿＿</div> ＿＿＿<div class="section" ID="U"> ＿＿＿＿<h3>う</h3> ＿＿＿</div> ＿＿＿<div class="section" ID="E"> ＿＿＿＿<h3>え</h3> ＿＿＿</div> ＿＿＿<div class="section" ID="O"> ＿＿＿＿<h3>お</h3> ＿＿＿</div> ＿＿</div> ＿＿<div class="section" id="K"> ＿＿＿<div class="section"> ＿＿＿＿<h3>か</h3> ＿＿＿</div> ＿＿＿<div class="section" ID="KI"> ＿＿＿＿<h3>き</h3> ＿＿＿</div> ＿＿＿<div class="section" ID="KU"> ＿＿＿＿<h3>く</h3> ＿＿＿</div> ＿＿＿<div class="section" ID="KE"> ＿＿＿＿<h3>け</h3> ＿＿＿</div> ＿＿＿<div class="section" ID="KO"> ＿＿＿＿<h3>こ</h3> ＿＿＿</div> ＿＿</div> ＿＿<div class="section" id="S"> ＿＿＿<div class="section"> ＿＿＿＿<h3>さ</h3> ＿＿＿</div> ＿＿＿<div class="section" ID="SI"> ＿＿＿＿<h3>し</h3> ＿＿＿</div> ＿＿＿<div class="section" ID="SU"> ＿＿＿＿<h3>す</h3> ＿＿＿</div> ＿＿＿<div class="section" ID="SE"> ＿＿＿＿<h3>せ</h3> ＿＿＿</div> ＿＿＿<div class="section" ID="SO"> ＿＿＿＿<h3>そ</h3> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
どうもありがとうございました。