- ベストアンサー
単語の右寄せ配置で１行下がるのを防ぐ方法
- 旧Internet Explorerで、単語の右寄せ配置を行うと１行下がってしまう場合、正しい配置を行う方法をご紹介します。
- 調べたり試行錯誤しても上手くいかない場合は、タイトルとTOPの位置を入れ替えることで、目的の配置を実現することが可能です。
- ただし、タイトルとTOPの位置を入れ替えると、流れが変わってしまうことがありますので、注意が必要です。
- takumana20
- お礼率91% (434/473)
- HTML
- 回答数4
- ありがとう数14
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
あーじゃあpositionはどうだろ dt{ position:relative; } dt a{ position:absolute; top:0; right:0; }
その他の回答 (3)
- zeff
- ベストアンサー率69% (137/198)
タイトルをspanで括って左にfloatさせてみました。 IE6で動作確認済み。 当然ですがdtのwidth調整が必要です。 <dl> <dt style="width:200px;"><span style="float:left;">タイトル</span><a style="float:right;" href="#">TOP</a></dt> <dd style="clear:both;">説明文説明文説明文、、、</dd> </dl>
お礼
ありがとうございます。やっぱり、分けないとできないですよね。 もっと簡単にできると思ってたのですが難しいですね。
補足
<dl> <dt><a href="#" style="float:right;">TOP</a>タイトル</dt> <dd>説明文説明文説明文、、、</dd> </dl> 最初にアンカーを前にして、タイトルを後ろ入れ替えればば、たぶん見た目は揃うのですけど、意味が違うような気がするんです。どうでしょうか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
もう少し詳しい情報が必要。 それは文書構造上どこに位置するのか？ <body> <dl> <dt> <dd> 何の定義リストなのか？
補足
<body> <div> <div> <h1></h1> <p></p><p></p> </div> <div> <h2></h2> <ul> <li></li><li></li><li></li><li></li><li></li> </ul> <h3></h3> <dl> <dt>タイトル <a href="#" style="float:right;">TOP</a></dt> <dd>説明文説明文説明文、、、</dd> <dt>タイトル <a href="#" style="float:right;">TOP</a></dt> <dd>説明文説明文説明文、、、</dd> <dt>タイトル <a href="#" style="float:right;">TOP</a></dt> <dd>説明文説明文説明文、、、</dd> </dl> </div> </div> --------------------------------- Ｑ＆Ａです。 HTML上部の<ul><li>に各質問項目がありまして、 <li>の質問項目をクリックすると、<dt>に移動します。 その下の<dd>で説明します。 縦長になるので、TOPへ戻るのリンクを右側に置いて、行ったり来たり便利にしたいのです。でも、このTOPのせいで隙間を作りたくないのです。
- salonpath
- ベストアンサー率48% (194/399)
text-align:right;って効きませんでしたっけ？
お礼
揃いました。ありがとうございます。 実はpositionはバグとか不具合が難しそうなので避けていたのです。 今回も上からの位置を合わせるのに50％を使ったのですが、 やっぱり全然違う位置に表示されてしまって ^_^; 位置の％が原因とわかるまでに、しばらく悩み諦めかけました。 ％は旧IEでだめなんですね。この事はemに変更して解決しました。 ここまで作るのにかなり順調に出来ていたのに、この質問のリンクの位置問題でかなりの時間を使ってしまいました・・・＿/￣|○ とりあえず、ハックを使わない方向でNO.3のzeffさんのフロートか NO.4のsalonpathさんのpositionで色々テストしてみます。<(_ _)>