Question

我的中心菜单栏包含在小于桌面模式picture attached的屏幕上，我尝试了几个css代码，使菜单项出现在单行上但没有工作。任何人都可以帮我这个吗？

这是我在CSS编辑器中添加的一些代码，用于居中导航栏：

#navigation {
position: relative;
}
#main-nav {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 24%;
}
.nav li:hover, .nav li.hover {
position: relative;
}
.nav li ul li {
left: 0;
}

我特别注意到.nav li部分控制导航栏的位置。

导航栏的html代码如下：

<div class="col-sm-6 col-md-3 footer-sidebar-wrap">
                            <aside id="nav_menu-2" class="widget widget_nav_menu"><h3 class="widget-title">Menu</h3><div class="menu-primary-menu-container"><ul id="menu-primary-menu-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-260"><a href="home.html">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="shop.html">Shop</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-117"><a href="about.html">About</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="contact.html">Contact</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-114"><a href="news.html">News</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="account.html">Account</a></li>
</ul></div></aside>                     </div>

导航栏的完整css代码位于：

.page .navbar-custom {
    background-color: rgba(10, 10, 10, .9) !important;

}
.navbar-custom {
    background-color: rgba(10, 10, 10, .9);
    border: 0;
    border-radius: 0;
    z-index: 1000;
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 11px;
    -webkit-transition: background, padding 0.4s ease-in-out 0s;
    -moz-transition: background, padding 0.4s ease-in-out 0s;
    -ms-transition: background, padding 0.4s ease-in-out 0s;
    -o-transition: background, padding 0.4s ease-in-out 0s;
    transition: background, padding 0.4s ease-in-out 0s;

}

.navbar a {
    -webkit-transition: color 0.125s ease-in-out 0s;
    -moz-transition: color 0.125s ease-in-out 0s;
    -ms-transition: color 0.125s ease-in-out 0s;
    -o-transition: color 0.125s ease-in-out 0s;
    transition: color 0.125s ease-in-out 0s;
}

.navbar-custom .sub-menu,
.navbar-custom .children {
    background: rgba(26, 26, 26, .9);
    border-radius: 0;
    border: 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-custom .navbar-brand {
    letter-spacing: 4px;
    font-weight: 400;
    font-size: 22px;
    color: #fff;
}

.navbar-custom .sub-menu li,
.navbar-custom .children li  {
    list-style:none;
}

.navbar-custom .sub-menu li a,
.navbar-custom .children li a  {
    width:100%;
    display:block;
}

.navbar-custom .nav li > a {
    position: relative;
    color: rgba(255, 255, 255, .7);
}

.navbar-custom .sub-menu > li > a,
.navbar-custom .children > li > a  {
    border-bottom: 1px solid rgba(73, 71, 71, 0.15) !important;
    padding: 11px 15px;
    letter-spacing: 2px;
    color: #999;
}

.navbar-custom .sub-menu .sub-menu,
.navbar-custom .children .children  {
    border-left: 1px solid rgba(73, 71, 71, 0.15);
    left: 100%;
    right: auto;
    top: 0;
    margin-top: 0;
}

.navbar-custom .sub-menu.left-side .sub-menu,
.navbar-custom .children.left-side .children {
    border: 0;
    border-right: 1px solid rgba(73, 71, 71, 0.15);
    right: 100%;
    left: auto;
}

.navbar-custom .nav > li > a:focus,
.navbar-custom .nav > li > a:hover,
.navbar-custom .nav .open > a,
.navbar-custom .nav .open > a:focus,
.navbar-custom .nav .open > a:hover,
.navbar-custom .sub-menu > li > a:focus,
.navbar-custom .sub-menu > li > a:hover {
    background: none;
    color: #fff;
}

.navbar-custom .sub-menu > li > a:hover,
.navbar-custom .children > li > a:hover {
    background: rgba(255, 255, 255, .1) !important;
}

.navbar-custom .menu-item-has-children-toggle:after {
    position: absolute;
    display: block;
    right: 0;
    top: 50%;
    margin-top: -6px;
    font: normal normal normal 14px/1 'ElegantIcons';
    font-size: 9px;
    content: "\43";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.navbar-custom .navbar-toggle .icon-bar {
    background: #fff;
}

.navbar-nav .menu-item-has-children>a:after,
.navbar-nav .page_item_has_children>a:after {
    position: absolute;
    display: block;
    right: 0;
    top: 50%;
    margin-top: -6px;
    font: normal normal normal 14px/1 ElegantIcons;
    font-size: 9px;
    content: "\43";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.navbar-nav .sub-menu,
.navbar-nav .children {
    min-width: 180px;
    font-size: 11px;
}

.navbar-right ul {
    text-align: left;
}

/* Navbar search */

.menu-item-has-children-search {
    position: relative;
    padding: 5px;
}

.menu-item-has-children-search .form-control {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
}

.search-btn {
    position: absolute;
    background: transparent;
    border: none;
    overflow: hidden;
    top: 50%;
    right: 1px;
    width: 42px;
    height: 40px;
    line-height: 38px;
    font-size: 14px;
    outline: none;
    color: #999;
    margin-top: -20px;
}

Answer 1

这是因为您的<li>元素超出了父<ul>元素的宽度。

我想你可以用

li { white-space: nowrap; }

这将停止换行为，但不会居中。

我会通过媒体查询解决此问题，或者让您的父<ul>元素更广泛。

要使用媒体查询，请使用以下模板：

@media (max-width: 1000px) { //place the CSS you want to be activated when the screen is smaller than 1000px here ul{ width: 1000px; } li{ font-size: 10px; } }

可能发生的另一件事是<li>或<h3>元素之间的空白区域。这是一个问题的原因是，如果这六个<li>或<h3>标签＆＃39;宽度都等于100％，那么这些额外的空格将超过100％宽度，使最后一个元素落到下一行。下面的代码可能会解决问题。

h3 {
padding:0;
margin:0;

}

删除较小屏幕尺寸的菜单栏换行

1 个答案: