个人中心
gpt4 book ai didi

html - 导航文本显示在 div 之外

转载 作者：太空宇宙 更新时间：2023-11-04 12:57:24 26 4
gpt4 key购买 nike

我网站的导航显示在我的页眉之外，我所做的一切都不起作用。我希望文本位于 .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; 
}

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

最佳答案

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

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

关于html - 导航文本显示在 div 之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25711796/

26 4 0
文章推荐： c++ - gcc arm 中的 strncpy 替换
文章推荐： java - 如何从Multipart中获取BufferedInputStream？
文章推荐： linux - config/config.guess 被符号链接(symbolic link)到第三方包中的错误文件
文章推荐： css - 如何添加:hover affects to fa-fa icons?
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com