Question

让我的导航正确浮动有些麻烦。它有一个一旦碰到断点，它右侧就有很多空间。我有尝试改变填充和边距，没有运气。我是相当缺乏经验，所以不要太难我！我肯定答案就在我的鼻尖。

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');

*{
	box-sizing: border-box;
}

body{
	margin:0;
	font-family:'Raleway', sans-serif;
	text-align: center;
}

img {
	max-width: 100%;
	height: auto;
	
}
.container {
	width: 95%;
	margin: 0 auto;
}

/* TYPOGRAPHY */

.title {
	font-size: 2.5rem;
	text-shadow: 2px 2px #000;
}

.title span {
	font-weight: 300;
	display: block;
	font-size: .9em;
	margin-bottom: 1.5em;
}

@media (min-width: 60rem){
	.title{
		font-size: 3.7rem;
	}
	
	
}

/* BUTTONS */

.button {
	display: inline-block;
	font-size: 1.15rem;
	text-decoration: none;
	text-transform: uppercase;
	border-width: 2px;
	border-style: solid;
	padding: .5em 1.75em;
	
}

.button-accent{
	color: #000;
	border-color: #000;
	
}

.button-accent:hover,
button-accent:focus {
	background-image: url(../images/gold-texture-wallpaper-1.jpg);
	
	
	
}


/* HEADER */

header{
	position:absolute;
	margin-top:1em;
	left: 0;
	right: 0;
	margin: 1em;
}

nav ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li{
	
	display: inline-block;
	margin: 1em;
}

nav a{
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
	font-size: .8rem;
	padding: .5em;
	color: white;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

nav a:hover,
nav a:focus {
	color: #bf9b30;
}

@media(min-width: 60rem){
	.logo{
		float: left;
		width: 400px;
		height:auto;
		
	}
	
	.nav{
		float: right;
		
	}
}

/* HOME HERO */

.home-hero {
	background-image: url(../images/homehero.png);
	padding: 20em 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center;
	left: 0;
	right: 0;
	width: 100%;
	color: white;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width. initial-scale=1">
<title>Alexander Sherman</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">

</head>

<body>
<header>
   <img src="images/logo.png" alt="Alexander Sherman logo" class="logo">
   <nav>
      <ul>
	     <li><a href="">Home</a></li>
	     <li><a href="">About</a></li>
	     <li><a href="">Content</a></li>
	   </ul>
   </nav>
</header>

<section class="home-hero">
   <div class="container">
      <h1 class="title"> Which door
         <span>will you unlock next?</span>
      </h1>
      <a href="" class="button button-accent">Meet Alexander</a>
   </div>
</section>

<section class="home-about">
   <div class="home-about-textbox">
   <h1>Who we are</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   
   <p><strong>Duis aute irure dolor in.</strong> Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
</section>

<section class="portfolio">
   <h1>Some of our work</h1>
   
   
   <figure class="port-item">
      <img src="images/portfolio1.jpg" alt="portfolio item">
      <figcaption class="port-desc">
         <p>Project Title</p>
	     <a href="" class="button button-accent button-small">Project Details</a>
      </figcaption>
   </figure>
   
   <figure class="port-item">
      <img src="images/portfolio2.jpg" alt="portfolio item">
      <figcaption class="port-desc">
         <p>Project Title</p>
	     <a href="" class="button button-accent button-small">Project Details</a>
      </figcaption>
   </figure>
   
   <figure class="port-item">
      <img src="images/portfolio3.jpg" alt="portfolio item">
      <figcaption class="port-desc">
         <p>Project Title</p>
	     <a href="" class="button button-accent button-small">Project Details</a>
      </figcaption>
   </figure>
   
   <figure class="port-item">
      <img src="images/portfolio4.jpg" alt="portfolio item">
      <figcaption class="port-desc">
         <p>Project Title</p>
	     <a href="" class="button button-accent button-small">Project Details</a>
      </figcaption>
   </figure>

   <figure class="port-item">
      <img src="images/portfolio5.jpg" alt="portfolio item">
      <figcaption class="port-desc">
         <p>Project Title</p>
	     <a href="" class="button button-accent button-small">Project Details</a>
      </figcaption>
   </figure>

   <figure class="port-item">
      <img src="images/portfolio6.jpg" alt="portfolio item">
      <figcaption class="port-desc">
         <p>Project Title</p>
	     <a href="" class="button button-accent button-small">Project Details</a>
      </figcaption>
   </figure>   
</section>

<footer>

<div class="col-4">
   <ul class="unstyled-list">
      <li><strong>Link 1</strong></li>
	  <li>Link 2</li>
	  <li>Link3</li>
	  <li>Link 4</li>
	  <li>Link 5</li>
   </ul>
</div> 

<div class="col-1">
   <ul class="unstyled-list">
      <li><strong>Link 1</strong></li>
	  <li>Link 2</li>
	  <li>Link3</li>
	  <li>Link 4</li>
	  <li>Link 5</li>
   </ul>
</div>

<div class="col-1">
   <ul class="unstyled-list">
      <li><strong>Link 1</strong></li>
	  <li>Link 2</li>
	  <li>Link3</li>
	  <li>Link 4</li>
	  <li>Link 5</li>
   </ul>
</div>

</footer>

</body>
</html>

＆＃13;

Answer 1

尝试在右侧设置nav float

header nav{float:right;}

导航没有正确浮动

1 个答案: