Question

我一直试着用一段时间尝试将我的徽标和导航菜单放在中心，同时使用float：right和float：left。我尝试过的每一次尝试都将它带到了网站的左侧。如果有任何:)，也可以随意指出代码中的失败。这是我的代码：

html, body { margin: 0; padding: 0; }

.navbackground {
 height: 55px;
 width: 100%;
 position: fixed;
 background-color: #FFFFFF;
 box-shadow: 0px 1px 5px #686868;
}
.navmenu-and-logo {
 height: 55px;
 width: 960px;
 position: fixed;
}.logo {
 float:left;
}
.menu {
 float:right;
}
.navmenu-and-logo a {
 padding: 17px 15px 0px 15px;
 color: #45ACFF;
 text-decoration:none;
 height: 38px;
 display: block;
}
.navmenu-and-logo a:hover {
 background-color: #A5DFFF;
}
.navmenu-and-logo li {
 font-size: 17px;
 font-family: Arial, Helvetica, sans-serif;
 display: inline-block;
}
.container {
 height: 1024px;
}
.backgroundimage1 {
 background-image: url('backgroundimage1.jpg');
 background-repeat: no-repeat;
 background-size: cover;
 height: 550px;
}
.content {
 margin: 0 auto;
 width: 960px;
 padding: 90px 0px 0px 0px;
 font-family: Arial, Helvetica, sans-serif;
 text-align: justify;
 color: #1C3C4E;
}
.content2 {
 margin: 0 auto;
 width: 960px;
 padding: 100px 0px 0px 0px;
 font-family: Arial, Helvetica, sans-serif;
 text-align: justify;
 color: #1C3C4E;
}
.portfolio {
 margin: 0 auto;
 width: 960px;
 background-color: #FFFFFF;
 box-shadow: 0px 1px 5px #CFCFCF;
}
.portfolio a {
 padding: 105px 107px 0px 107px;
 color: #45ACFF;
 text-decoration:none;
 height: 150px;
 display: block;
}
.portfolio a:hover {
 background-color: #A5DFFF;
 display: block;
}
.portfolio li {
 font-size: 24px;
 font-family: Arial, Helvetica, sans-serif;
 display: inline-block;
}

.footer {
 height: 140px;
 width: cover;
 background-color: #1C3C4E;
 font-family: Arial, Helvetica, sans-serif; 
}
.lefttext {
 float:left;
 padding: 60px 0px 0px 350px;
 color: #45ACFF;
}
.righttext {
 float:right;
 padding: 60px 300px 0px 0px;
 color: #45ACFF;
}

<!DOCTYPE html>
<html>
<head>

<link href="css/style.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Loom | Home</title>

</head>
<body>


<div class="navbackground">
</div>
<!--Logo an Navigation Menu-->
	<div class="navmenu-and-logo">
	<!--Site Logo-->
	<div class="logo">
	<img src="images/loom1.png">
	</div>
	<!--End of site logo-->

	<!--Navigation Menu-->
	<div class="menu">
	<li><a href="index.html">HOME</a></li>
	<li><a href="contact.html">CONTACT ME</a></li>
	</div>
	<!--End of navigation menu-->
	</div>

<div class="container">
<!--My Awesome Lemon Background c: -->
<div class="backgroundimage1">

<!--Site Content, paragraphs etc.-->
<div class="content">

	<!--Title-->
	<center><h1>LEARN MORE ABOUT ME</h1></center>	
	<!--End of Title-->

	<!--First Paragraph-->
	<p>	
	If you'd like to know more about me, I'll try to write some stuff that might interest you, but please know that I am not that interesting, but I guess we could start off with my name and go on from there.
	My name is Hans, I live in a medium-sized town by the name of Alingsås, Sweden. I am 16 years old and I dedicate my spare time to playing games and doing productive things, such as design, coding, video editing and sometimes building computers. I started with webdesign and coding at the age of 10, and once I found out what amazing stuff you can do with just the tip of your fingers I was hooked!
	My first website was made for my friend 5 years ago because his dad needed a site for his company, and I didn't mind helping them considering how fun I thought it was. There is NO WAY I'll be able to write down an entire page telling you about myself, this is pretty much all I can think of so it'll have to do.
	Now you know a little bit more about me, so thanks for reading!
	</br></br>
	Om du råkar vilja veta lite mer om mig så ska jag försöka att skriva ner lite saker om mig som kanske intresserar dig, men tänk på att jag inte är speciellt intressant.
	Jag antar att vi kan börja med mitt namn och sedan fortsätta därifrån. Mitt namn är Hans, jag bor i en medel stor stad vid namn Alingsås. Jag är 16 år gammal och jag dedikerar min lediga tid till att spela spel och mer produktiva saker som att designa, koda, video redigera och bygga datorer.
	Jag började med att web designa redan när jag var 10 år gammal, och när jag insåg vilka otroliga grejer man kunde göra med bara fingrarna var jag fast! Den första hemsidan jag gjorde var åt en väns pappa för 5 år sen, hans pappa behövde nämligen en hemsida för sitt företag.
	Finns ingen chans i världen att jag kan skriva ner en hel sida om mig själv så detta får duga. Nu vet du lite mer om mig, så tack för att du tog din tid att läsa!
	</p> 
	<!--End of the first paragraph-->
</div>
<div class="content2">
	<center><h1>MY PORTFOLIO</h1></center>
		<!--Navigation Menu-->
	<div class="portfolio">
	<li><a href="websites.html">WEBSITES</a></li>
	<li><a href="https://www.mediafire.com/folder/xnjysf1dcmj6h/Photos">IMAGES</a></li>
	<li><a href="https://www.youtube.com/playlist?list=PLNe5zO4uM4-PUlwnPAsLLXaWYD2ZWQTiD">VIDEOS</a></li>
	</div>
	<!--End of navigation menu-->
</div>
</div>
</div>
<div class="footer">
<div class="lefttext">
	Loom.pe.hu©
</div>
<div class="righttext">
	Website designed by Hans Nilsson
</div>
</div>
</body>
</html>

Answer 1

您需要的只是将navmenu-and-logo div居中。无需使用float

.navmenu-and-logo {
    height: 55px;
    width: 960px;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.logo {
    /* float: left; */
    display: inline-block;
}
.menu {
    /* float: right; */
    display: inline-block;
}

<强> DEMO

如何使用浮动中心导航菜单和徽标男人？

1 个答案: