![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
”TOP”のリンクを”タイトル”と
同じ行の右端にしたいのですが
旧Internet Explorerだけ1行下がります。
同じ行にしたいのですが。どうすればよいでしょうか?
---------------------------------
上の例、タイトル TOP
説明文説明文説明文、、、
---------------------------------
下の例、タイトル
TOP
説明文説明文説明文、、、
---------------------------------
上の例にしたいけど、下の例になってしまう、、、
<dl>
<dt>タイトル <a href="#" style="float:right;">TOP</a></dt>
<dd>説明文説明文説明文、、、</dd>
</dl>
上記のdtとddは例なので1つですが連続で複数設定しています。
dt内はインラインしかできないようなのでPやブロックにしないでフロートさせました。
タイトルとTOPを逆にしたら可能ですが流れがなんか変ですし、、、
ハックもできれば使いたくないのですが、どうでしょう?
調べたり色々やったのですがわかりません_/ ̄|○
No.4ベストアンサー
- 回答日時:
あーじゃあpositionはどうだろ
dt{
position:relative;
}
dt a{
position:absolute;
top:0;
right:0;
}
揃いました。ありがとうございます。
実はpositionはバグとか不具合が難しそうなので避けていたのです。
今回も上からの位置を合わせるのに50%を使ったのですが、
やっぱり全然違う位置に表示されてしまって ^_^;
位置の%が原因とわかるまでに、しばらく悩み諦めかけました。
%は旧IEでだめなんですね。この事はemに変更して解決しました。
ここまで作るのにかなり順調に出来ていたのに、この質問のリンクの位置問題でかなりの時間を使ってしまいました・・・_/ ̄|○
とりあえず、ハックを使わない方向でNO.3のzeffさんのフロートか
NO.4のsalonpathさんのpositionで色々テストしてみます。<(_ _)>
No.3
- 回答日時:
タイトルを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>
最初にアンカーを前にして、タイトルを後ろ入れ替えればば、たぶん見た目は揃うのですけど、意味が違うような気がするんです。どうでしょうか?
No.2
- 回答日時:
もう少し詳しい情報が必要。
それは文書構造上どこに位置するのか?
<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>
---------------------------------
Q&Aです。
HTML上部の<ul><li>に各質問項目がありまして、
<li>の質問項目をクリックすると、<dt>に移動します。
その下の<dd>で説明します。
縦長になるので、TOPへ戻るのリンクを右側に置いて、行ったり来たり便利にしたいのです。でも、このTOPのせいで隙間を作りたくないのです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- その他(悩み相談・人生相談) 本の概要の説明の仕方を教えて下さい。 概要とは大まかな内容なのは知っていますが タイトル+内容説明で 1 2022/10/22 20:49
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- Excel(エクセル) [テーマのフォント]、[見出しのフォント]、[本文のフォント]とは何ぞや? 2 2023/02/27 09:18
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- Excel(エクセル) エクセルで隣(右or左)のセルと同じ文字色にしたい 2 2022/12/13 11:33
- その他(ネットショッピング・通販・ECサイト) どちらが悪いですか? 3 2023/04/02 21:47
- その他(法律) 学校のコンプライアンス室がまともに対応しない時、文部科学省が対応する窓口は? 1 2022/06/10 20:46
- 数学 数独の解法についてお聞きします 4 2023/05/25 17:15
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
表の高さ指定してもうまく表示...
-
Google Keepで数字に勝手に下線...
-
URLが青くならない
-
リンク先のURLを別の文字にする...
-
パワーポイント:テキストボッ...
-
ワード エクセル 初歩
-
Excel で下線が消えてしまうの...
-
洗濯タグの画像
-
アンダースコア(下線)のあるメ...
-
画像の横に文字を入力する方法...
-
アンダーラインを引くやり方
-
イラレ8.0で文字にアンダーライン
-
Word 変換したら、その後...
-
エクセルのセルの下線が消えない
-
ホームページにPDFファイルをリ...
-
vb2019でHTMLの取得
-
CGI.pmでかけないタグってあり...
-
infoseekの無料アクセス解析の...
-
seesaaでmy blog listを使うには
-
複数タグ指定してHTMLを取得したい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLのbody内に<style>~</styl...
-
<input>タグについて
-
リンクを設定した文字の上にマ...
-
Textareaの幅をブラウザ画面の90%
-
CSSでインラインフレームを非表...
-
文章をCSSで左揃えにする方法
-
3つの文字「左端」、「中央」、...
-
iframe
-
表の高さ指定してもうまく表示...
-
リンク付き商品画像を並べて貼...
-
htmlで、文字に線を囲むには何...
-
headの部分に書いたCSSがWebペ...
-
参照ボタンの名前を変えたい
-
テーブルの上下線を消したい
-
インラインフレームで高さの指定
-
単語の右寄せ配置で1行下がる
-
文字位置の修正方法は
-
LaTeXにて、1行で左寄せや中央...
-
VMLで塗りを透明にする
-
リンク先のURLを別の文字にする...
おすすめ情報