- ベストアンサー
css で box の四隅に文字をいれるにはどうすればよいでしょうか。
css で box の四隅に文字をいれるにはどうすればよいでしょうか。 <div id="box"> <div id="lt">左上隅</div><div id="rt">右上隅</div> <div id="lb">左下隅</div><div id="rb">右下隅</div> </div> #box { width:400px; height: 400px; } #lt { ??? } ...
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
たとえば、その４つが文書構造上リストとしいマークアップされているとして ★スタイルシートを理解しないブラウザや携帯電話は単純なリストとして表示。 ★IE6以前は隣接セレクタを解釈できないので、classで設定するほうが良いでしょう。 ★下記サンプルは、ソースを見やすくするため、タブを全角スペース２個で置換してあるので、元に戻してテストすること。 <!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 http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- ul#menue{ display:block; position:relative; width:400px; height:400px; border: solid 1px red; padding:0px; margin-left:auto; margin-right:auto; background-color: rgb(200,200,200); display:block; } ul#menue li{ display:block; margin:0px; padding:0px; position:absolute; width:400px; top:0px; left:0px; text-align: left; } ul#menue li+li{ right:0px; text-align: right; } ul#menue li+li+li{ top: auto; bottom:0px; left:0px; text-align: left; } ul#menue li+li+li+li{ right:0px; text-align: right; } --> </style> <link rel="START" href="../index.html"> </head> <body> <h1>サンプル</h1> <ul id="menue"> <li>会社概要(左上)</li> <li>製品案内(右上)</li> <li>マニュアル(左下)</li> <li>連絡先・・・ちょっと長い・・・(右下)</li> </ul> <ul> <li>項目１</li> <li>項目２</li> <li>項目３</li> <li>項目４</li> </ul> </body> </html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
うまくいきました。ありがとうございます。 position: absolute で left, right, top, bottom を 0 にすればよかったのですね。