将导航项右对齐

我想使用这些属性（链接）：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我也有评论的背景图像CSS3？这也是我想申请

我的代码：

*{ 
 
    margin:0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 

 
html, 
 
body { 
 
    background-color: #fff; 
 
    color: #555; 
 
    font-family: "Lato", "Arial", "sans-serif"; 
 
    font-weight: 300; 
 
    font-size: 20px; 
 
    text-rendering: optimizeLegibility; 
 
    } 
 

 

 
.wrapper{ 
 
\t display: flex; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    margin: 0 auto; 
 
    flex-direction:column; 
 
    width: 100%; 
 
    max-width: 80%; 
 
    border: solid 1px #000; 
 
} 
 

 
.header{ 
 
    /*background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("logo.png"); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100vh; 
 
    background-attachment:fixed; */ 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    color: rgba(0, 0, 0, 0.7); 
 
    } 
 

 
.logo{ 
 
    height: 100px; 
 
    width:auto; 
 
    border-radius: 50%; 
 
    margin: 10px; 
 
    align-items: center; 
 
} 
 

 

 
.main-nav { 
 
    display: flex; 
 
    list-style: none; 
 
    } 
 

 

 
.main-nav a{ 
 
    text-decoration: none; 
 
    color:rgba(255, 255, 255, 0.8); 
 
} 
 

 

 

 
\t

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>FlexBox: HTML5 and CSS3 Fundamentals</title> 
 

 
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> 
 

 
    <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <header> 
 
     <div class="header"> 
 
     <img src="logo1.png" alt="Logo" class="logo"> 
 

 
     <nav> 
 
      <ul class="main-nav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      </ul> 
 
     </nav> 
 
     </div> 
 
    </header> 
 

 
    </div> 
 
</body> 
 

 
</html>

来源

2017-03-24 user2228874

后你有这么远 – LGSon

噢，这是怎么回事？

标志左侧导航右侧

*{ 
 
    margin:0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 

 
html, 
 
body { 
 
    background-color: #fff; 
 
    color: #555; 
 
    font-family: "Lato", "Arial", "sans-serif"; 
 
    font-weight: 300; 
 
    font-size: 20px; 
 
    text-rendering: optimizeLegibility; 
 
    } 
 

 

 
.wrapper{ 
 
\t display: flex; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    margin: 0 auto; 
 
    flex-direction:column; 
 
    width: 100%; 
 
    max-width: 80%; 
 
    border: solid 1px #000; 
 
} 
 

 
.header{ 
 
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("logo.png"); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100vh; 
 
    background-attachment:fixed; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    color: rgba(0, 0, 0, 0.7); 
 
    justify-content: space-between; 
 
    display: flex; 
 
    flex-direction: row; 
 
    } 
 

 
.logo{ 
 
    height: 100px; 
 
    width:auto; 
 
    border-radius: 50%; 
 
    margin: 10px; 
 
} 
 

 

 
.main-nav { 
 
    display: flex; 
 
    list-style: none; 
 
    } 
 

 

 
.main-nav a{ 
 
    text-decoration: none; 
 
    color:rgba(255, 255, 255, 0.8); 
 
} 
 

 

 

 
\t

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>FlexBox: HTML5 and CSS3 Fundamentals</title> 
 

 
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> 
 

 
    <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <header> 
 
     <div class="header"> 
 
     <img src="logo1.png" alt="Logo" class="logo"> 
 

 
     <nav> 
 
      <ul class="main-nav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      </ul> 
 
     </nav> 
 
     </div> 
 
    </header> 
 

 
    </div> 
 
</body> 
 

 
</html>

来源

2017-03-27 09:04:37

你好丹，在这个标志也随着导航向右移动，我希望左侧的标志和导航右侧。 – user2228874

那么你需要在左边的标志和右边的导航，但在同一行右边？对不起，问题不够清楚，我会编辑我的答案 –

对不起丹，如果我的问题不清楚给你。 “是”我需要左侧的徽标和右侧的导航，但在同一行中。 – user2228874

-1

.main-nav { 
    display: flex; 
    list-style: none; 
    justify-content: flex-end; 
    }

我只是说这。主要-NAV。

这是你需要的吗？

来源

2017-03-27 08:37:23

由于丹，但代码[辩解内容：FLEX-结束]，取导航项目到最后但低于下一行的徽标，而不是在同一行中徽标的右侧。 – user2228874

好的，在一个新的答案完成后，我不知道你想在同一行 –

将导航项右对齐

回答

相关问题