1

この水平リストのドロップダウン メニューを中央に配置できませんでした。float left を使用しているため、すべての css を作り直す必要がありますか?

リストの位置に関連するすべてのコードを次に示します。または、ここをクリックしてライブで表示する

.megamenu {
margin:auto;
position:absolute;
margin:0;
width:100%;
font-size:1.182em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
border-right: none;
top: -1px;
list-style-type:none;
list-style-position:inside;




.megamenu > li {

    display:inline;
    border:none;
    margin:0;
    float:left;
    padding: 0px 0 0px 30px;
    -webkit-transition: background-color 0.4s ease-out;
    -moz-transition: background-color 0.4s ease-out;
    -o-transition: background-color 0.4s ease-out;
    -ms-transition: background-color 0.4s ease-out; 
    border-right: none;
    transition: background-color 0.4s ease-out;

}

どんな助けでも大歓迎です

4

3 に答える 3

1

私が理解していることから、インライン要素内にブロックレベルの要素をネストするべきではありません。そうは言っても、私はHTMLを単純化し、代わりに「コンテンツ」を保持するをサブ順不同リストに置き換えることによって、このJSFiddleソリューションを作成しました。<div>（理論的には、このサブリストは1つしかないので、必要に応じてコンテンツを<li>保持できるはずです。）<div>

したがって、HTMLは次のようになります。

<ul id="menu">
    <li>Home
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>One day
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>I wish to
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>Be in the
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>Centre of this page
        <ul>
            <li>Content</li>
        </ul>
    </li>
</ul>​

そしてCSSは次のように設定されました：

#menu {
    text-align: center;
    height: 30px;
}

#menu li {
    list-style: none;
    display:inline-block;
    margin: 5px 15px;
}

#menu li ul {
    display: none;
}

#menu li:hover ul {
    display: block;
    position: absolute;
    top: 30px; /* height of menu */
    left: 25px;
    right: 25px;
}

JSFiddleでは、どの要素がどこにあるかを明確にするために、いくつかの色を追加しました。また、ライブの例で使用していたアニメーションCSSも削除しましたが、簡単に元に戻すことができます。

この方法は、メニューに絶対的な高さ（この例では）を指定し、その下のホバーに表示される30px「コンテンツ」を（またはメニューの高さが何であれ）絶対的に配置することに依存しています。<div>top: 30px

于 2012-09-03T00:21:49.137 に答える
1

これを行うにはさまざまな方法がありますが、100% ではなく幅を指定する必要があります。それは大丈夫ですか？

次に、幅を設定しdisplay:inlineて、ul とtext-align:center親 div で使用するか、またはmargin:auto.

これで問題が解決しない場合は、お知らせください。フィドルを作成します:)

于 2012-09-03T00:30:01.980 に答える