Question

我网站的导航显示在我的标题之外，我所做的一切都没有。我希望文本在内部.header并在右侧。这可能是一些愚蠢而简单的错误，但我似乎无法找到它。现场演示问题：http://codecat.pancakeapps.com/index.html

HTML：

<head>
<link href="normalize.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<title>Codecat - Hand crafted websites for affordable prices</title>
</head>
<body>
<div class="header">
<div class="logo">
    <a href="http://codecat.pancakeapps.com/index.html">
    <Codecat>
    </a>
<nav>
    <ul>
        <li>BIO</li>
        <li>COMMISIONS</li>
    </ul>
</nav>  
</div>    
</div>
<div class="about">
Welcome to Codecat! I am an independent web designer that makes hand crafted websites on commision for affordable prices. My last three projects are listed below, (to the owners expense) so look around!
</div>
<div class="one">
<h1>Blinders Journal</h1>
<span class="progress">(In Progress)</span>
<article>
<span class="link">
    <a href="http://blindersjournal.pancakeapps.com/index.html">
http://blindersjournal.pancakeapps.com/index.html
    </a>
</span>
<br />
<p>Have you ever, as a new writer, felt intimidated by the contributor bios you read in the back of your favorite magazines? Have you ever, as a well-established writer, wondered how well your manuscripts would fare if they were separated from your name and list of previous publications?</p>

<p>We here at Blinders Literary Journal hope that we have found a solution for writers and poets, new and advanced. We read blind submissions only for two electronic issues a year, one to be published in summer and one in winter. We never want to see your cover letter, only your fiction, creative nonfiction, poetry, and artwork.</p>

<p>Once we accept your work, we will display it professionally in a digital environment. Also, upon acceptance, your name will become important to us. We will pay the highest respect possible to our contributors.</p> 
</article>
</div>
<div class="two">
<h1>Lorem ipsum dolor sit amet</h1>
<span class="progress">(Done)</span>
<article>
<span class="link">http://consectetuer.adipiscing.elit.com</span>
<br />
<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</p>
</article>
</div>
</body>

CSS：

@font-face {
font-family: Orson Heavy;
src: url('https://dl.dropboxusercontent.com/u/105222237/sf-orson-casual.heavy.ttf');
}
@font-face {
font-family: Timeburner;
src: url('https://dl.dropboxusercontent.com/u/105222237/timeburner_regular.ttf');
}
@font-face {
font-family: Icecream;
src: url('https://dl.dropboxusercontent.com/u/105222237/ICE-CS__.TTF');
}
@font-face {
font-family: Nordic;
src: url('https://dl.dropboxusercontent.com/u/105222237/PTF-NORDIC-Rnd.ttf');
}
.header {
background: #000;
height: 60px;
}
.logo {
font-family: Orson Heavy;
font-size: 40px;
color: #0f0;
margin-left: 10px;
}
body {
background: url('http://www.dreamwidth.org/img/styles/planetcaravan/starrysky.png');
}
.one, .two {
background: #000;
text-align: left;
padding: 20px;
margin-left: 120px;
margin-right: 120px;
margin-top: 20px;
}
h1 {
font-family: Icecream;
font-size: 40px;
color: yellow;
letter-spacing: 2px;
}
article {
font-family: Verdana;
color: #fff;
font-size 10px;
}
.progress {
color: yellow;
font-size 14px;
font-family: Timeburner;
}
.link {
color: yellow;
}
.about {
background: rgba(0,0,0,0.5);
text-align: left;
padding: 20px;
margin-left: 120px;
margin-right: 120px;
margin-top: 20px; 
color: green;
font-size: 21px;
font-family: Timeburner;
}
a {
text-decoration: none;
color: yellow;
}
.logo a {
color: green;
}
nav {
font-family: Nordic;
font-size: 30;
color: green;
}
ul {
float: left;
margin: 0;
padding: 0;
list-style: none; 
}
li {
float: left; 
}

修改发生了一些事情，现在徽标在页面顶部出现故障并取代导航。我不知道出了什么问题。

Answer 1

您可以使用此css代码，它可能对您有所帮助。在您的代码中，我更改了ul li样式并根据徽标设置了边距对齐。

<强> Live Working Demo

HTML代码：

<div class="header">
<div class="logo">
    <a href="http://codecat.pancakeapps.com/index.html">
    &#60;Codecat&#62;
    </a>
<nav>
    <ul>
        <li>BIO</li>
        <li>COMMISIONS</li>
    </ul>
</nav>  
</div>    
</div>
<div class="about">
Welcome to Codecat! I am an independent web designer that makes hand crafted websites on commision for affordable prices. My last three projects are listed below, (to the owners expense) so look around!
</div>
<div class="one">
<h1>Blinders Journal</h1>
<span class="progress">(In Progress)</span>
<article>
<span class="link">
    <a href="http://blindersjournal.pancakeapps.com/index.html">
http://blindersjournal.pancakeapps.com/index.html
    </a>
</span>
<br />
<p>Have you ever, as a new writer, felt intimidated by the contributor bios you read in the back of your favorite magazines? Have you ever, as a well-established writer, wondered how well your manuscripts would fare if they were separated from your name and list of previous publications?</p>

<p>We here at Blinders Literary Journal hope that we have found a solution for writers and poets, new and advanced. We read blind submissions only for two electronic issues a year, one to be published in summer and one in winter. We never want to see your cover letter, only your fiction, creative nonfiction, poetry, and artwork.</p>

<p>Once we accept your work, we will display it professionally in a digital environment. Also, upon acceptance, your name will become important to us. We will pay the highest respect possible to our contributors.</p> 
</article>
</div>
<div class="two">
<h1>Lorem ipsum dolor sit amet</h1>
<span class="progress">(Done)</span>
<article>
<span class="link">http://consectetuer.adipiscing.elit.com</span>
<br />
<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</p>
</article>
</div>

CSS代码：

@font-face {
font-family: Orson Heavy;
src: url('https://dl.dropboxusercontent.com/u/105222237/sf-orson-casual.heavy.ttf');
}
@font-face {
font-family: Timeburner;
src: url('https://dl.dropboxusercontent.com/u/105222237/timeburner_regular.ttf');
}
@font-face {
font-family: Icecream;
src: url('https://dl.dropboxusercontent.com/u/105222237/ICE-CS__.TTF');
}
@font-face {
font-family: Nordic;
src: url('https://dl.dropboxusercontent.com/u/105222237/PTF-NORDIC-Rnd.ttf');
}
.header {
background: #000;
height: 60px;
}
.logo {
font-family: Orson Heavy;
font-size: 40px;
color: #0f0;
margin-left: 10px;
position:relative;
float;left;
}
nav ul
{
    list-style-type:none;
    display:inline-block;
    margin-left:210px;
    margin-top:-39px;
}
body {
background: url('http://www.dreamwidth.org/img/styles/planetcaravan/starrysky.png');
}
.one, .two {
background: #000;
text-align: left;
padding: 20px;
margin-left: 120px;
margin-right: 120px;
margin-top: 20px;
}
h1 {
font-family: Icecream;
font-size: 40px;
color: yellow;
letter-spacing: 2px;
}
article {
font-family: Verdana;
color: #fff;
font-size 10px;
}
.progress {
color: yellow;
font-size 14px;
font-family: Timeburner;
}
.link {
color: yellow;
}
.about {
background: rgba(0,0,0,0.5);
text-align: left;
padding: 20px;
margin-left: 120px;
margin-right: 120px;
margin-top: 20px; 
color: green;
font-size: 21px;
font-family: Timeburner;
}
a {
text-decoration: none;
color: yellow;
}
.logo a {
color: green;
}
nav {
font-family: Nordic;
font-size: 30;
color: green;
}
ul {
float: left;
margin: 0;
padding: 0;
list-style: none; 
}
li {
float: left; 
}

<强>结果：

result

Answer 2

我没有完全解答您的问题，但请尝试在您的css http://jsfiddle.net/jc9w670r/中添加此问题（增加输出区域以更好的方式查看结果）

.logo nav{
float:right;
}

导航文本显示在div之外

2 个答案: