超链接创建换行符

时间:2015-02-14 20:14:09

标签: html css

我正在为我所在的Youtube小组制作一个网站。

我在div#header-menu中有很多超链接。 http://i.snag.gy/rVI8c.jpg



body, html {
	width: 100%;
	background: url("/img/dirt.png");
	background-size: 2%;
	image-rendering: -webkit-optimize-contrast;
	padding-top: 0px;
	padding-left: 0px;
	font-family: Minecraftia;
}
#header {
	width: 100%;
	background-image: url("/img/header.png");
	background-repeat: repeat-x;
	background-size: 2%;
	margin-left: -8px;
	margin-top: -8px;
	height: 64px;
}
a {
	cursor: pointer;
	color: blue;
	text-decoration: none;
}
@font-face {
	font-family: Minecraftia;
	src: url("/Minecraftia-Regular.ttf");
}
#header-menu {
	width: 100%;
	height: 48px;
	line-height: 58px;
	vertical-align: middle;
	margin-left: -8px;
	padding-left: 8px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background: rgba(17,146,32,1);
	background: -moz-linear-gradient(top, rgba(17,146,32,1) 0%, rgba(40,128,40,1) 45%, rgba(0,82,5,1) 52%, rgba(15,123,42,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(17,146,32,1)), color-stop(45%, rgba(40,128,40,1)), color-stop(52%, rgba(0,82,5,1)), color-stop(100%, rgba(15,123,42,1)));
	background: -webkit-linear-gradient(top, rgba(17,146,32,1) 0%, rgba(40,128,40,1) 45%, rgba(0,82,5,1) 52%, rgba(15,123,42,1) 100%);
	background: -o-linear-gradient(top, rgba(17,146,32,1) 0%, rgba(40,128,40,1) 45%, rgba(0,82,5,1) 52%, rgba(15,123,42,1) 100%);
	background: -ms-linear-gradient(top, rgba(17,146,32,1) 0%, rgba(40,128,40,1) 45%, rgba(0,82,5,1) 52%, rgba(15,123,42,1) 100%);
	background: linear-gradient(to bottom, rgba(17,146,32,1) 0%, rgba(40,128,40,1) 45%, rgba(0,82,5,1) 52%, rgba(15,123,42,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#119220', endColorstr='#0f7b2a', GradientType=0 );
}

<!DOCTYPE html>
<html>
	<head>
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <title>The Infected Horde</title>
        <link rel="stylesheet" href="/style.css" type="text/css">
	</head>
	<body>
		<div id="header"></div>
		<img src="/img/logo.gif" style="height: 72px; width: auto;" /><br>
		<div id="header-menu"><a id="homebtn">Home</a>&emsp;
		<a id="videosbtn">Servers We Play On</a></div>&emsp;
		<a id="aboutusbtn">About Us</a></div>&emsp;
		<a id="videosbtn">Videos</a></div>&emsp;
		<a id="contactbtn">Contact Us</a></div>&emsp;
	</body>
</html>
&#13;
&#13;
&#13;

我做错了什么? 对于代码段中的非工作图片感到抱歉。

1 个答案:

答案 0 :(得分:0)

由于您没有理由放置</div>代码,因此只有一个div,应该是:

<div id="header"></div>
        <img src="/img/logo.gif" style="height: 72px; width: auto;" /><br>
        <div id="header-menu"><a id="homebtn">Home</a>
        <a id="videosbtn">Servers We Play On</a>
        <a id="aboutusbtn">About Us</a>
        <a id="videosbtn">Videos</a>
        <a id="contactbtn">Contact Us</a>
         </div>

最后只使用一个div,我希望在display:inline标记css中使用a。此外,这里是FIDDLE,我删除了&emsp;,因为我不认为他们在这里有任何用处。