< ul>水平导航栏...垂直对齐元素 [英] <ul> horizontal nav bar... vertically-align element
问题描述
我目前有以下代码。我试图让第二,第三和第四li元素在导航栏的中间垂直对齐。第一个li是图片,第二个是所有的文字。
这是目前的屏幕截图。
http://i49.tinypic.com/bfesl3.png p>
我试过使用vertical-align:middle和padding。请注意,如果在Firefox中查看,第二,第三和第四个li元素在中间显示为垂直对齐,但在其他浏览器中不显示。
这是我所拥有的代码。
< ul class =nav>
< li>< a href =index.htmlstyle =border-right:1px #FFFFFF solid; padding-top:4.6px; padding-bottom:17.3px;> ;< img src =img / randomtitle.pngstyle =padding-left:8px; padding-top:8px;/>< / a>< / li>
< li>< a href =aboutme.htmlstyle =vertical-align:middle; padding-top:32px; margin-left:-15px; padding-bottom:14px; padding-right: 20px; border-right:1px #ffffff solid;>关于我< / a>< / li>
< li>< a href =films.htmlstyle =vertical-align:middle; padding-top:32px; margin-left:1px; padding-bottom:14px; padding-right:30.5 px; border-right:1px #ffffff solid;> films< / a>< / li>
< li>< a href =contactme.htmlstyle =vertical-align:middle; padding-top:32px; margin-left:-20px; padding-bottom:14px; padding-right: 11px; border-right:1px #ffffff solid;>与我联系< / a>< / li>
< span class =navlinkimages>
< li>< a href = target =_ blank>< img src =social / social_vimeo.pngheight =30pxstyle =margin-right:-14px;/> ;< / a>< / li>
< li>< a href = target =_ blank>< img src =social / social_youtube.pngheight =30pxstyle =margin-right:-14px;/> ;< / a>< / li>
< li>< a href = target =_ blank>< img src =social / social_facebook.pngheight =30pxstyle =margin-right:-14px;/> ;< / a>< / li>
< li>< a href = target =_ blank>< img src =social / social_twitter.pngheight =30pxstyle =margin-right:-14px; />< / a>< / li>
< / span>
< / ul>`
CSS代码:
.nav {
list-style-type:none;
padding-left:0;
margin-left:0;
font-family:DinC;
padding-bottom:5px;
background-color:#000000;
border-radius:5px;
height:35px;
}
.navlinkimages {
float:right;
padding-top:5px;
}
.nav li {
display:inline;
vertical-align:middle;
}
ul.nav a:hover {
color:#FA4B2A;
}
.nav li img {
vertical-align:middle;
}
ul.nav a {
text-decoration:none;
margin-right:27px;
color:#FFFFFF;
}
有没有办法使它在所有浏览器上垂直对齐? p>
谢谢!
请尝试:
.nav li {
display:inline;
vertical-align:middle;
line-height:35px;
}
I currently have the following code. I am trying to get the second, third, and fourth "li" elements to vertically-align in the middle of the nav bar. The first "li" is an image, and the second-fourth are all text.
Here is a screenshot of it currently.
http://i49.tinypic.com/bfesl3.png
I have tried using "vertical-align:middle" and padding. Note that the second, third and fourth "li" elements appear vertically-aligned in the middle if viewed in Firefox but not in other browsers.
Here is the code I have.
<ul class = "nav">
<li><a href="index.html" style="border-right:1px #FFFFFF solid; padding-top:4.6px; padding-bottom:17.3px;"><img src="img/randomtitle.png" style="padding-left:8px;padding-top:8px;"/></a></li>
<li><a href="aboutme.html" style="vertical-align:middle;padding-top:32px;margin-left:-15px;padding-bottom:14px;padding-right:20px;border-right:1px #ffffff solid;">about me</a></li>
<li><a href="films.html" style="vertical-align:middle;padding-top:32px;margin-left:1px;padding-bottom:14px;padding-right:30.5px;border-right:1px #ffffff solid;">films</a></li>
<li><a href="contactme.html" style="vertical-align:middle;padding-top:32px;margin-left:-20px;padding-bottom:14px;padding-right:11px;border-right:1px #ffffff solid;">contact me</a></li>
<span class="navlinkimages">
<li><a href= target="_blank"><img src="social/social_vimeo.png" height = "30px" style = "margin-right:-14px;"/></a></li>
<li><a href= target="_blank"><img src="social/social_youtube.png" height = "30px" style = "margin-right:-14px;"/></a></li>
<li><a href= target="_blank"><img src="social/social_facebook.png" height="30px" style = "margin-right:-14px;"/></a></li>
<li><a href= target="_blank"><img src="social/social_twitter.png" height = "30px" style = "margin-right:-14px;" /></a></li>
</span>
</ul>`
CSS Code:
.nav {
list-style-type:none;
padding-left:0;
margin-left:0;
font-family:DinC;
padding-bottom:5px;
background-color: #000000;
border-radius:5px;
height:35px;
}
.navlinkimages {
float:right;
padding-top:5px;
}
.nav li {
display:inline;
vertical-align:middle;
}
ul.nav a:hover {
color:#FA4B2A;
}
.nav li img {
vertical-align:middle;
}
ul.nav a{
text-decoration:none;
margin-right:27px;
color:#FFFFFF;
}
Is there a way to make it vertically-aligned on all browsers?
Thanks!
Try this:
.nav li {
display:inline;
vertical-align:middle;
line-height:35px;
}
这篇关于< ul>水平导航栏...垂直对齐元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!