Question

我不想使用Float属性。

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

我还评论了背景图片css3？我也想申请

我的代码：

＆＃13;

*{
    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{
	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);
}

＆＃13;

<!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>

＆＃13;

Answer 1

哦，这是怎么回事？

左侧的徽标和右侧的导航

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my_btn").click(function(){
    $("#my_modal").modal('show');
});
});
</script>
</body>
</html>

*{
    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{
	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);
}

Answer 2

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

我刚把它添加到.main-nav。

这是你需要的吗？

将标题内的导航项目对齐

2 个答案: