0

私はこのコードを持っています:

<style> 
        .floatright 
        {
            float: right;
            margin-right:800px;
        }

        .menu {
            padding: 0;
            float: right;
            width: auto;
            position:relative;
        }
        .menu ul {
            list-style-type: none; 
            margin: 0; 
            padding: 0;
        } 
        .menu li { 
            display:inline; 
            padding:0;
            margin: 0px;
        } 
        .menu a:link, 
        .menu a:hover {
            text-decoration:none;
            padding:0 5px 5px 0;
            margin-right: 8px;
        }
</style>

<div class="floatright">
<ul class="menu">
<li><a href="/apidocs">api</a></li>
<li><a href="/tools">tools</a></li>
<li><a href="/blog">blog</a></li>
</ul>
</div>

ページの右側 (右隅ではなく、ちょうど左側) にフロートし、各リンク間に隙間を空けることを意図しています。

ギャップは正常に機能しますが、画面のサイズを変更すると、ti が本来の位置にとどまりません

何か案は？

4

2 に答える 2

2

親divを中央に配置する必要があります...そして、メニューが右に浮かびます。

    .floatright {
        width:1000px;
        height:50px;
        margin:0 auto;
    }

幅は「オレンジボックス」の幅でなければなりません。メニューはすでに親 div で適切にフローティングされています。

ここに jsfiddle の例があります: http://jsfiddle.net/hvLkh/

追加のアドバイス: 1) div を body タグの外に置かないでください。2) div に hight 属性を追加して、ボックスを押し下げます。3) フォントの書式設定を CSS に直接追加し、フォント タグを避けてください。次のようにします。

    .floatright {
        width:1000px;
        height:50px;
        margin:0 auto;
        font-family:"Trebuchet MS",Arial,Verdana,Tahoma;

    }

そして、ここに更新されたフィドルがあります：http://jsfiddle.net/n6mnP/1/

于 2013-03-11T15:44:22.537 に答える
2

チャーリー、div の右側に 800px のマージンがあるため、画面の解像度に関係なく、常にそのマージンがあります。

画面の解像度に基づいてマージンを減らしたい場合は、パーセンテージまたはメディア クエリの使用を検討してください。

于 2013-03-11T15:34:27.093 に答える