[英]CSS Menu centered horizontal /w img between li
i've been searching on the web and on stackoverflow, tried a lot of code, but nothing works. 我一直在网上和stackoverflow上搜索,尝试了很多代码,但是没有任何效果。
I want to center a menu, with an image (will be a logotype) inside. 我想居中放置菜单,并在其中放置图像(将是标识)。 Whats wrong with my code or where I'm failing?
我的代码有什么问题或者我哪里失败了? I've been searching and looking for help for 3 days already...
我已经搜寻并寻求帮助已有3天了...
I want the menu to be inside of .container class, so the page content width is 978px 我希望菜单位于.container类内部,因此页面内容宽度为978px
PREVIEW / EXAMPLE: http://jsfiddle.net/j08691/LVCkp/1/ 预览/示例: http : //jsfiddle.net/j08691/LVCkp/1/
HTML 的HTML
<div id="home">
<div class="nav clearfix">
<div class="container clearfix">
<ul id="menu">
<li><a href="#home" class="current">Home</a></li>
<li><a href="#services">Serviços</a></li>
<li><a href="#team">Equipa</a></li>
<a href="#"><img src="img/logo.png" alt="Logo Style Euclides" width="90px" height="40px"></a>
<li><a href="#image">Style</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="#contact"" class="right"">Contato</a></li>
</ul>
</div>
</div></div>
CSS 的CSS
#home{
width: 100%;
background-color: #e9e0fd;
}
a{
text-decoration: none;
}
/*TOP MENU*/
#home .nav img{
float: left;
padding: 10px;
}
#home .nav{
/*float: left;*/
margin: 0;
padding: 0;
width: 100%;
margin-bottom: 10px;
}
ul#menu{
/*width: 978px;*/
margin: 0;
padding: 0 ;
list-style: none;
margin-bottom: 40px; /* Tamanho da barra de menu */
text-align: center;
background-color: black;
}
ul#menu li{
float: left;
padding-top: 10px;
margin: 4px;
}
ul#menu li a{
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
letter-spacing: -1px;
line-height: 30px;
color: black;
padding: 2px 24px;
}
ul#menu a:hover{
background-color: #a6e897;
color: black;
padding-top: 24px;
padding-bottom: 21px;
border-bottom: 3px solid;
border-color: #6bd951;
}
ul#menu a.current{
color: #32c230;
}
ul#menu a.current:hover{
background-color: #a6e897;
color: black;
}
Here is solution for you: http://jsfiddle.net/j08691/LVCkp/1/ 这是为您提供的解决方案: http : //jsfiddle.net/j08691/LVCkp/1/
Solution is: 1. put logo in <li>
too 2. give the class eg logo to of your code with logo 3. apply width:auto; 解决方法是:1.将徽标也放在
<li>
。2 .将带有徽标的类(例如徽标)添加到带有徽标的代码中 。3.应用width:auto; and margin:auto; 保证金:自动; to ul#menu
ul#menu
HTML 的HTML
<div id="home">
<div class="nav clearfix">
<div class="container clearfix">
<ul id="menu">
<li><a href="#home" class="current">Home</a></li>
<li><a href="#services">Serviços</a></li>
<li><a href="#team">Equipa</a></li>
<li> <a href="#" class="logo"><img src="img/logo.png" alt="Logo Style Euclides"></a></li>
<li><a href="#image">Style</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="#contact"" class="right"">Contato</a></li>
</ul>
</div>
</div></div>
CSS 的CSS
body{
background:#ccc;
}
#home{
width: 100%;
background-color: #e9e0fd;
}
a{
text-decoration: none;
}
/*TOP MENU*/
#home .nav img{
float: left;
padding: 10px;
}
#home .nav{
/*float: left;*/
margin: 0;
padding: 0;
width: 100%;
margin-bottom: 10px;
}
ul#menu{
/*width: 978px;*/
list-style: none;
margin-bottom: 40px; /* Tamanho da barra de menu */
text-align: center;
background-color: black;
width:auto;
margin:auto;
}
ul#menu li{
float: left;
padding-top: 10px;
margin: 4px;
}
ul#menu li a{
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
letter-spacing: -1px;
line-height: 30px;
color: black;
padding: 2px 24px;
}
ul#menu li a.logo{
width:90px;
height:40px;
padding:0;
border:none;
margin:auto;
opacity:0.8;
}
ul#menu a:hover{
background-color: #a6e897;
color: black;
padding-top: 24px;
padding-bottom: 21px;
border-bottom: 3px solid;
border-color: #6bd951;
}
ul#menu a.current{
color: #32c230;
}
ul#menu a.current:hover{
background-color: #a6e897;
color: black;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.