Question

我是html和css的新手。我试图让我的导航栏水平显示并在文本链接上方显示背景图像。

这是我失败/尝试过的代码：

CSS：

＆＃13;

#aside_sect_mm {
	margin: 0px;
	background-position: 0%;
	background-color: #004E27;
	max-width: 704px;
	max-height: 100px;
	background-repeat: no-repeat;
	position: relative;
}

#aside_sect_mm nav {
	text-align: justify;
	max-width: 704px;
	width: 100%;
	max-height: 100px;
	margin-top: 0%;
	padding: 0px;
	display: inline-block;
	position: relative;
}

#aside_sect_mm nav ul {
	padding: 0px 0px 0px 0px;
	max-height: 100px;
	max-width: 704px;
	position: relative;
	display: inline-block;
}
#aside_sect_mm nav ul li {
	font-size: 1.1em;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight: lighter;
	text-align: justify;
	list-style: none;
	line-height: 3.5em;
	position: relative;
	padding: 30px 0px 0px 0px;
	margin-left: 4.5em;
	max-height: 100px; 
	color: #FCE011;
	display: inline-block;
	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  {
	position: relative;
	max-height: 100px;
	max-width: 50%;
    background-repeat: no-repeat;
	background-position: 50% 0%;
	display: block;
}


#aside_sect_mm nav ul li.bio_icon {
	background-image: url(../svg/bio_ore_ylw.svg);
}

#aside_sect_mm nav ul li.stat_icon {
	background-image: url(../svg/stats_ore_ylw.svg);
}

#aside_sect_mm nav ul li.img_icon {
	background-image: url(../svg/img_ore_ylw.svg);
}

#aside_sect_mm nav ul li.vid_icon {
	background-image: url(../svg/vids_ore_ylw.svg);
}

#aside_sect_mm nav ul li.fut_icon {
	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 {
	position: relative;
	display: block;
	max-height: 100px;
	max-width: 50%;
	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;
	max-height: 100px;
	max-width: 50%;
    display: block;
    background-color: #F6EF1B;
	background-repeat: no-repeat;
	background-position: -26px 0%;
	text-decoration: none;
    color: #004E27;
}

#aside_sect_mm nav ul li.bio_icon a:hover {
	background-image: url(../svg/bio_ore_grn.svg);
}

#aside_sect_mm nav ul li.stat_icon a:hover {
	background-image: url(../svg/stats_ore_grn.svg);
}

#aside_sect_mm nav ul li.img_icon a:hover {
	background-image: url(../svg/img_ore_grn.svg);
}

#aside_sect_mm nav ul li.vid_icon a:hover {
	background-image: url(../svg/vids_ore_grn.svg);
}

#aside_sect_mm nav ul li.fut_icon a:hover {
	background-image: url(../svg/fut_ore_grn.svg);
}

And the HTML:

＆＃13;

<!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>

＆＃13;

如果有人的专业知识可以指出我正确的方向，我非常感谢你的帮助。

Answer 1

这里有很多改变，但我从研究水平对齐开始＃34;在这种情况下，您需要将这些元素（nav ul li）显示设置为＆＃39; inline-block＆＃39;。关于背景图片，你错过了引号（＆＃34; ../ svg /..."）我相信你想要的图像是在＆＃39; li＆＃39;而不是＆＃39;一个＆＃39 ;.我创建了一个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;   
}

我必须添加！important以强制使用css ...您可能希望避免这种情况，只需深入了解css特异性的详细信息（这里很酷的文章：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/）。

带有图像的水平导航栏; CSS不显示＆＃34;内联＆＃34;

1 个答案: