Question

我正在为网站开发菜单。当我们在一个选定的页面上（让我们说Home）时，我对所选项目菜单（Home）有一个不同的类，以便能够以不同的方式设置它。我需要增加当前所选页面的高度，但是，当我这样做时，所有菜单项都对齐div的顶部。我想将它们与div的底部对齐。

要理解它，Here is a link to an EXAMPLE

CSS：

    .main-navigation {
position: absolute;
bottom: 0;
z-index: 11;
left: 16px;
background-color: #ff0;
}

article, aside, footer, header, hgroup, main, nav, section {
display: block;
}

#page_wrapper, #footer {
text-align: left;
}

body {
text-align: center;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
}

.main-navigation ul {
list-style: none;
margin: 0 0 0 10px;
padding: 0;
}

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

.main-navigation li.current-menu-item {
background-color: #DDDBD8;
height: 41px;
}

.main-navigation li {
margin-top: 14px;
width: 110px;
background: white;
margin: 0 0px 0 3px;
float: left;
height: 27px;
text-transform: uppercase;
text-align: center;
font-size: 13px;
padding: 12px 5px 0 5px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: #eeeeee;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
}

.main-navigation ul {
list-style: none;
}

.main-navigation li.current-menu-item a {
text-decoration: none;
font-size: 12px;
font-family: 'FuturaRegular';
color: #af8283;
}

.main-navigation li a {
text-decoration: none;
font-size: 12px;
font-family: 'FuturaRegular';
color: #5A4A42;
}

.site-header {
height: 200px;
position: relative;
}

HTML：

    <header id="header" class="site-header" role="banner">  
<nav id="site-navigation" class="main-navigation" role="navigation">
                <div class="menu-header-navigation-container"><ul id="menu-header-navigation" class="header-nav"><li id="menu-item-4" class="home menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-4"><a href="/">Home</a></li>
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5"><a href="/news">News</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="/shop">Shop</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="/about-the-show">About The Show</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="/contact-us">Contact Us</a></li>
</ul></div>     </nav></header>

Answer 1

.main-navigation li.current-menu-item.menu-item{
margin-top:0px;    
}

.main-navigation li.menu-item{
margin-top:14px;
}

jsfiddle

Answer 2

如果您将<li>设置为display: inline-block;而不是float: left;，则可以使用vertical-align: bottom;来获得您所追求的结果。

请参阅此处http://jsfiddle.net/7VqzM/12/

将菜单项对齐div的底部而不是顶部

2 个答案: