带图像的水平导航栏; 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不显示“内联”

回答

相关问题