CSS水平導航列表垂直排列文字與圖像鏈接

我很新的CSS，但一直在學習，做我媽媽的小企業網站來節省她的錢，但我有我的導航欄一點CSS的麻煩。基本上，如果你去這裏：http://area25dallas.com/s並看看導航欄，我在il列表中遇到了麻煩，使圖像與文本垂直排列（而不是與頂部對齊），也是出於某種原因，圖像會彼此疊加，而不是坐在彼此旁邊（我不希望它們在單獨的列表中像文本鏈接一樣，因爲邊距太分散）。CSS水平導航列表垂直排列文字與圖像鏈接

我一直在玩CSS，並且在這個地方搜索了一下，但仍然沒有找到解決辦法。有沒有快速解決這個問題？

謝謝！

編輯：這裏是HTML和CSS的blip但如果你使用的是Chrome我覺得剛纔檢查的元素，看看發生了什麼事情

<div id = "header"> 
    <div class = "container"> 
    <a href = "index.htm" id = "logo"></a> 
<ul id = "main-menu"> 
<li class = "active"><a href = "">home</a></li> 
<li><a href = "">about</a></li> 
<li><a href = "">gallery</a></li> 
<li><a href = "">press</a></li> 
<li><a href = "">contact</a></li> 
<li><a href = ""><img src="images/twitter_newbird_boxed_ white.png" /></a> 
<a href = ""><img src="images/Pinterest_Favicon white.png" /></a></li> 

</ul> 

    </div> 
</div>

和CSS的最簡單的方法

#main-menu 
{ 
float: right; 
position:relative; 
top:122px; 
right:150px; 
} 
#main-menu li 
{ 
float: left; 
margin: 30px 12px 15px 12px; 
padding:0; 
height:23px; 
list-style:none; 
line-height:20px; 
} 

#main-menu li:hover, #main-menu li.active { background-position: 0 -23px;} 
#main-menu li:hover a, #main-menu li.active a{ 
background-position: 100% -30px; 
} 
#main-menu li a 
{ 
display:block; 
padding:0px 15px 5px 10px; 
font-size:17px; 
color:#fff; 
text-decoration:none; 
}

來源

2012-03-21 OnTheRidge

請提供[減少測試用例（http://css-tricks.com/減少測試用例/）在[dabblet]（http://dabblet.com/）或[Jsfiddle]（http://jsfiddle.net/）上。 – bookcasey 2012-03-21 22:03:28

在我可以回答之前 - 你的意思是你想讓圖像像導航鏈接一樣水平顯示嗎？ – 2012-03-21 22:05:12

是的，對於他們與文本垂直對齊，而不是從文本的頂部邊緣對齊...如果這是有道理的 – OnTheRidge 2012-03-21 22:27:53

圖像被分成多行，因爲它們位於<a>標籤內，該標籤已被設計爲塊級元素。將樣式更改爲：

#main-menu { 
    float: right; 
    position: relative; 
    right: 75px; /* Changed */ 
    top: 122px; 
} 

#main-menu li a { 
    color: #fff; 
    display: inline-block; /* Changed */ 
    font-size: 17px; 
    padding: 0 15px 5px 10px; 
    text-decoration: none; 
} 

/* New */ 
#main-menu li a img { 
    position: relative; 
    top: -10px; 
}

底部的新規則將圖像向上移動一點。你可以玩弄你的CSS，並以許多不同的方式獲得相同的結果 - 我採用了一種不涉及對現有工作進行很多更改的方法。

來源

2012-03-21 22:41:49 Jason

謝謝！正是我需要的！ – OnTheRidge 2012-03-21 23:20:51

感謝您的提示，大家，這也幫助我了我的圖像在我的CSS導航。

我也建議一些額外的代碼，以減輕你的間距問題......

#main-menu li a img { 
position:absolute; 
background:inherit; 
    top: 0px; 
margin-bottom:auto; 
max-height: 33px;

}

來源

2013-11-20 17:18:11

CSS水平導航列表垂直排列文字與圖像鏈接

回答

相關問題