0

以下のコードのリンクの下にあるドロップダウンを中央に配置しようとしています。これはどのように行われますか？を使用して表示/非表示の部分を実行しますが、後でjquery文字の下の中央に配置できません。rglyphicon

    <!DOCTYPE html>
<html>
<head>
<title> New Document </title>
<style type="text/css">
.main{
    width:300px;
    background:cyan;
}
.right{
    float:right;
    position: relative;
    white-space: nowrap;
}
ul {
    list-style:none outside none;
    padding:0px;
    margin:0;
    position:absolute;
    right: 0;

}

</style>
</head>

<body>
<div class="main">
    Left
    <div class="right">
                <span>R</span>
            <ul>
                <li>Option 1</li>
                <li>Option 2</li>
                <li>Option 3</li>
                <li>Option 4</li>
            </ul>
    </div>
</div>

</body>
</html>
4

1 に答える 1

1

Rを最初のulリスト要素として入れます。CSS の変更をいくつか追加すれば完了です。

私のフィドルを参照してください: http://jsfiddle.net/Wq2Ls/1/

.menuコンテナも必要ありません。そのすべての CSS を に入れることができますul。また、スパンをdiv
に置き換えました。Span はインライン要素であり、その中に を配置することはベスト プラクティスではありません。.right ul

EDIT :
に設定position:absoluteするとul、ブロック要素ではなく、が を持っていてRも位置自体を中央に配置できません。また、親の幅全体を埋めることができるように を配置する必要があります。 更新されたフィドル: http://jsfiddle.net/Wq2Ls/5/Rtext-align:centerRdiv

于 2013-10-10T18:11:46.847 に答える