Question

这个对我来说没有多大意义，但也许我忽视了一些显而易见的事情。在这里：

我正在处理一个名为Size Mttrs的Wordpress主题，我已经对其进行了大量修改。我遇到的问题是导航菜单不会将所有列表元素（或导航链接）置于中心。我将text-align：center应用于#sidebar a {}，这使我的所有导航链接都正确居中...除了其中两个（“联系人”和“属性”）。这两个甚至不在最后或开头，它们位于列表的一半。我无法想象为什么除了那两个之外它会占据中心。

我发布了一张图片，但这是一个新帐户，并且ID发布了一个链接，除了它认为这是垃圾邮件的原因。

这是侧边栏的CSS（您会注意到我尝试将text-align：center应用于几乎所有内容）：

#sidebar { width:210px; top:0px;bottom:0px; line-height:18px; position:fixed; height:100%;background:#f0f0f0;padding:20px;text-align:center!important;  }
.widget-top a,
#sidebar a { color:#CCC;text-align:center!important; }


#sidebar .menu { padding:0; margin:0 0 20px; display:block;border-top:4px solid     #ccc;border-bottom:3px solid #ccc;text-align:center!important; }
#container.expanded #sidebar .menu a,
#sidebar .menu a { text-align:center;color:#000; font-weight:400;font- style:none;display:block;letter-spacing:2px; padding:10px 50px;font-size:1.3em;font-family:   'PTSansRegular', 'ChanticleerRomanRegular', Palatino, serif!important;border-bottom:1px  solid #ccc; text-transform:uppercase; }
#sidebar .menu a:hover {font-weight:800!important}
#sidebar .menu li { margin-bottom:0!important;text-align:center!important; }
#sidebar .menu .sub-menu { display:none; margin-left:10px }
#sidebar .menu .sub-menu a { font-weight:normal; padding:5px 0; font-size:100% }
#sidebar .sub-menu ul { border-left:0; }
#sidebar .drop-menu:after { content:""; display:block; float:right; width:11px; height:11px; overflow:hidden; background-position:-122px 0; margin:3px 0 0 0 }
#sidebar .drop-menu:hover:after { background-position:-122px -16px }
#sidebar .drop-menu.open:after { background-position:-134px 0 }
#sidebar .drop-menu.open:hover:after { background-position:-134px -16px }
#sidebar input[type=text], .textfield { background:#282a2d; color:#666; border:3px solid #222326; -webkit-box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5); -moz-box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5); box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5) }
#sidebar input[type=text]:focus, .textfield:focus { color:#1f1f1f }

这是HTML输出：

<div id="nav_menu-3" class="widget widget_nav_menu"><div class="menu-nav-container"><ul  id="menu-nav" class="menu"><li id="menu-item-31" class="menu-item menu-item-type-post_type  menu-item-object-page menu-item-31"><a  href="http://katonacreative.com/bluntzer/wordpress/">Home</a></li>
<li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://katonacreative.com/bluntzer/wordpress/?page_id=87">Fisher Island</a></li>
<li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://katonacreative.com/bluntzer/wordpress/?page_id=101">News</a></li>
<li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-155"><a href="http://katonacreative.com/bluntzer/wordpress/?page_id=153">Agents</a></li>
<li id="menu-item-183" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-183"><a href="http://katonacreative.com/bluntzer/wordpress/?page_id=181">Contact</a></li>
<li id="menu-item-194" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-194"><a href="http://katonacreative.com/bluntzer/wordpress/?page_id=192">Properties</a></li>
<li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-204 current_page_item menu-item-206"><a href="http://katonacreative.com/bluntzer/wordpress/?page_id=204">Test</a></li>
<li id="menu-item-202" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-202"><a href="http://bluntzergroup.idxco.com/idx/17612/mapSearch.php">Map Search</a></li>
</ul></div></div> <span class="separator"><span class="line"></span></span>

我唯一能想到的是可能会有一些时髦的PHP进程，我不知道，可能与这个主题有WP NAV设置的方式有关吗？欢迎任何和所有帮助。

Answer 1

取消#sidebar .menu a样式规则的左右边距...应该阅读padding:10px 0而不是padding:10px 40px

垂直WP Nav菜单不以所有<li>元素为中心，只有一些</li>

1 个答案: