帶圖像的水平導航欄; CSS不顯示「內聯」

我是新來的HTML和CSS。我試圖讓我的導航欄水平顯示，並在文字鏈接上方有背景圖片。帶圖像的水平導航欄; CSS不顯示「內聯」

這裏是我的失敗/企圖代碼：

CSS：

#aside_sect_mm { 
 
\t margin: 0px; 
 
\t background-position: 0%; 
 
\t background-color: #004E27; 
 
\t max-width: 704px; 
 
\t max-height: 100px; 
 
\t background-repeat: no-repeat; 
 
\t position: relative; 
 
} 
 

 
#aside_sect_mm nav { 
 
\t text-align: justify; 
 
\t max-width: 704px; 
 
\t width: 100%; 
 
\t max-height: 100px; 
 
\t margin-top: 0%; 
 
\t padding: 0px; 
 
\t display: inline-block; 
 
\t position: relative; 
 
} 
 

 
#aside_sect_mm nav ul { 
 
\t padding: 0px 0px 0px 0px; 
 
\t max-height: 100px; 
 
\t max-width: 704px; 
 
\t position: relative; 
 
\t display: inline-block; 
 
} 
 
#aside_sect_mm nav ul li { 
 
\t font-size: 1.1em; 
 
\t font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
 
\t font-weight: lighter; 
 
\t text-align: justify; 
 
\t list-style: none; 
 
\t line-height: 3.5em; 
 
\t position: relative; 
 
\t padding: 30px 0px 0px 0px; 
 
\t margin-left: 4.5em; 
 
\t max-height: 100px; 
 
\t color: #FCE011; 
 
\t display: inline-block; 
 
\t position: relative; 
 
} 
 

 
#aside_sect_mm nav ul li.bio_icon, #aside_sect_mm nav ul li.stat_icon, #aside_sect_mm nav ul li.img_icon, #aside_sect_mm nav ul li.vid_icon, #aside_sect_mm nav ul li.fut_icon { 
 
\t position: relative; 
 
\t max-height: 100px; 
 
\t max-width: 50%; 
 
    background-repeat: no-repeat; 
 
\t background-position: 50% 0%; 
 
\t display: block; 
 
} 
 

 

 
#aside_sect_mm nav ul li.bio_icon { 
 
\t background-image: url(../svg/bio_ore_ylw.svg); 
 
} 
 

 
#aside_sect_mm nav ul li.stat_icon { 
 
\t background-image: url(../svg/stats_ore_ylw.svg); 
 
} 
 

 
#aside_sect_mm nav ul li.img_icon { 
 
\t background-image: url(../svg/img_ore_ylw.svg); 
 
} 
 

 
#aside_sect_mm nav ul li.vid_icon { 
 
\t background-image: url(../svg/vids_ore_ylw.svg); 
 
} 
 

 
#aside_sect_mm nav ul li.fut_icon { 
 
\t background-image: url(../svg/fut_ore_ylw.svg); 
 
} 
 

 
#aside_sect_mm nav ul li.bio_icon a, #aside_sect_mm nav ul li.stat_icon a, #aside_sect_mm nav ul li.img_icon a, #aside_sect_mm nav ul li.vid_icon a, #aside_sect_mm nav ul li.fut_icon a { 
 
\t position: relative; 
 
\t display: block; 
 
\t max-height: 100px; 
 
\t max-width: 50%; 
 
\t text-decoration: none; 
 
    color: #F6EF1B; 
 
} 
 

 
#aside_sect_mm nav ul li.bio_icon a:hover, #aside_sect_mm nav ul li.stat_icon a:hover, #aside_sect_mm nav ul li.img_icon a:hover, #aside_sect_mm nav ul li.vid_icon a:hover, #aside_sect_mm nav ul li.fut_icon a:hover { 
 
    position: relative; 
 
\t max-height: 100px; 
 
\t max-width: 50%; 
 
    display: block; 
 
    background-color: #F6EF1B; 
 
\t background-repeat: no-repeat; 
 
\t background-position: -26px 0%; 
 
\t text-decoration: none; 
 
    color: #004E27; 
 
} 
 

 
#aside_sect_mm nav ul li.bio_icon a:hover { 
 
\t background-image: url(../svg/bio_ore_grn.svg); 
 
} 
 

 
#aside_sect_mm nav ul li.stat_icon a:hover { 
 
\t background-image: url(../svg/stats_ore_grn.svg); 
 
} 
 

 
#aside_sect_mm nav ul li.img_icon a:hover { 
 
\t background-image: url(../svg/img_ore_grn.svg); 
 
} 
 

 
#aside_sect_mm nav ul li.vid_icon a:hover { 
 
\t background-image: url(../svg/vids_ore_grn.svg); 
 
} 
 

 
#aside_sect_mm nav ul li.fut_icon a:hover { 
 
\t background-image: url(../svg/fut_ore_grn.svg); 
 
} 
 

 
And the HTML:

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Untitled Document</title> 
 
<link rel="stylesheet" type="text/css" href="css/test.css"> 
 
</head> 
 

 
<body> 
 
<section id="aside_sect_mm"> 
 
<nav> 
 
<ul> 
 
<li class="bio_icon"><a href="#bio">Bio</a></li> 
 
<li class="stat_icon"><a href="#stats">Stats</a></li> 
 
<li class="img_icon"><a href="#images">Images</a></li> 
 
<li class="vid_icon"><a href="#videos">Videos</a></li> 
 
<li class="fut_icon"><a href="#future">Future</a> 
 
</ul> 
 
</nav> 
 
</section> 
 

 
</body> 
 
</html>

如果一個人的專業知識可以在正確的方向指向我，我會非常感激的幫助。

來源

2015-04-17 Aaron Wilson

哪裏是背景圖片？ –

這裏有很多需要改變的地方，但我會先從研究「水平對齊」開始。在這種情況下，您需要將這些元素（nav ul li）顯示設置爲'inline-block'。關於背景圖片，你錯過了引號（「../ svg/...」），我相信你想要'li'上的圖像，而不是'a'。我爲你創建了一個jsfiddle來嘗試一些新的東西，並開始尋找你想要的東西：http://jsfiddle.net/keddkyz5/1/。關鍵的CSS的變化是：

#aside_sect_mm nav ul li.bio_icon 
{ 
background-image: url("http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"); 
width: 100px; 
} 

#aside_sect_mm nav ul li 
{ 
display: inline-block !important; 
}

我不得不添加重要的給力的CSS ...你可能會想避免，只是深入到CSS具體細節（酷文章在這裏：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ ）。

來源

2015-04-17 17:37:26 deebs

來自一個偉大網站的另一篇CSS提示和技巧文章：https：//css-tricks.com/specifics-on-css-specificity/ – deebs

帶圖像的水平導航欄; CSS不顯示「內聯」

回答

相關問題