我不确定这里发生了什么,但是我想要得到它,所以“欢迎来到blabla”就在我的thead的右边。但它似乎出了毛病?
屏幕截图:http://i.imgur.com/mCGCE8B.png
CSS代码:
body {
background-image: url('images/bg.png');
background-repeat: repeat;
padding: 0px;
margin: 0 0;
}
.content {
max-width: 1200px;
height: 800px;
margin: 0px auto;
background: #B9B9B9;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
box-shadow: 0px 5px 5px #000;
}
#navBack {
max-width: 1200px;
height: 30px;
background: rgb(30,87,153);
background: rgb(69,72,77);
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
margin: 0px auto;
border-bottom: solid #424242;
}
#navBack ul {
list-style-type: none;
height: 80px;
max-width: 1200px;
margin: auto;
}
#navBack li {
list-style-type: none;
height: 80px;
width: 100px;
margin: 0;
text-align: center;
float: left;
}
#navBack ul a {
background-image: url(images/nav_sep.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 0px;
padding-left: 0px;
display: block;
line-height: 30px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #000;
}
#navBack ul a:hover {
color: #fff;
}
.copyright {
max-width: 1200px;
height: 30px;
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
margin: 0px auto;
border-top: solid #424242;
text-align: center;
line-height: 30px;
box-shadow: 0px 3px 3px #000;
}
.copyright a {
color: green;
}
#theadTitle {
max-width: 1200px;
height: 30px;
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
border-bottom: solid #424242;
}
#thead {
max-width: 1200px;
height: 400px;
background-color: #CBCBCB;
margin: 20px 20px;
box-shadow: 0px 0px 3px #000;
}
HTML代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Noszscape - Home</title>
<LINK href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content">
<div id="navBack">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Play Now</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Vote</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
<div id="thead" style="width: 75%">
<div id="theadTitle" > Welcome to Naszscape! </div>
</div>
</div>
<div class="copyright">
<span style="font-style:italic"><strong>All rights reserved ©</span> <span style="color: skyblue"><a href="http://www.runelocus.com/forums/member.php?67852-317-Delta-Coder">317 Delta Coder</a></span> <span style="font-style:italic">2014</strong></span>
</div>
</body>
</html>
答案 0 :(得分:0)
您的内联样式为width: 75%
,它会将文本推到一边。
我会将其删除max-width: 1200px;
并将text-align: right;
添加到#theadTitle
元素。