1

Magento のカスタム メニュー拡張機能を使用していますが、custommenu.css を変更してメニューを中央に配置する方法がわかりません。これはメニューのコードです:

<div class="nav-container">
  <div id="custommenu">
    <div id="menu3" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" onmouseover="wpShowMenuPopup(this, 'popup3');">
    <div id="popup3" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup3', 'menu3')" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" style="z-index: 9999;">
    <div id="menu4" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" onmouseover="wpShowMenuPopup(this, 'popup4');">
    <div id="popup4" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup4', 'menu4')" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" style="display: none; top: 25px; left: 77px; z-index: 10000;">
... rest of code...

そして、これは私が CSS で試したものです - #custommenu の text-align + div.menu の display:inline-block (および他のいくつかのオプションも) ですが、動作させることはできません:

#custommenu {
    position:relative;
    font-size: 14px;
    margin: 0 auto;
    padding: 0 16px;
    width: 918px;
    z-index: 999;
    text-align: center;    
}
div.menu {
    display:inline-block;
    float: left;
}

メニューを中央に配置する方法を教えてください。ここで何が間違っていますか？

4

1 に答える 1

0

これで CSS の問題が解決するかどうかはわかりません<div>が、閉じられていない s があります。

修正された HTML:

<div class="nav-container">
<div id="custommenu">
    <div id="menu3" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" onmouseover="wpShowMenuPopup(this, 'popup3');"></div>
    <div id="popup3" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup3', 'menu3')" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" style="z-index: 9999;"></div>
    <div id="menu4" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" onmouseover="wpShowMenuPopup(this, 'popup4');"></div>
    <div id="popup4" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup4', 'menu4')" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" style="display: none; top: 25px; left: 77px; z-index: 10000;"></div>
</div>
</div>

CSS ファイルにアクセスして編集できない場合は、<div class="nav-container">を別の でラップしてみてください<div>。

例：

<div class="nav-wrapper">
    <div class="nav-container">
        <div id="custommenu">
            ...
        </div>
    </div>
</div>

そして、次のように CSS を参照します。

div.nav-wrapper div.nav-container div#custommenu {
    position:relative;
    font-size: 14px;
    margin: 0 auto;
    padding: 0 16px;
    width: 918px;
    z-index: 999;
    text-align: center;    
}
div.nav-wrapper div.nav-container div#custommenu div.menu {
    display:inline-block;
    float: left;
}
于 2013-01-16T15:11:48.760 に答える