html - 导航文本干扰常规？

Question

我不确定这里发生了什么，但我正在努力让“欢迎来到 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 &copy;</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>

Answer 1

您有 width: 75% 的内联样式，它会将文本推到一边。

我会删除它和 max-width: 1200px; 并将 text-align: right; 添加到 #theadTitle 元素。

See this fiddle.