Question

我尝试创建背景颜色为灰色的横幅。我希望这个横幅包含徽标和菜单选项。

我认为我必须有三个div，但是当我将徽标和菜单选项放入其中时，我将它作为三个单独的东西，而不是一个容器中的两个东西。

另外，如果有人对我的代码进行批评是如此友善，我会很感激，所以我会改进。

提前谢谢。

＆＃13;

div.header_container {
    font-family: tamarillo-jf, sans-serif;
    font-style: normal;
    font-weight: 400;
    border: solid blue 10px;
}

div.logo_container {
    border: solid red;
    float: left;
}

h1.logo {
    padding: 10px;
    margin: 0;
    color: forestgreen;
    font-family: tamarillo-jf, sans-serif;
    font-style: normal;
    font-weight: 400;
}

div.nav_container {
    border: solid pink;
    float: right;
    overflow: auto;
    margin: 0;
}

li.option {
    display: inline;
    padding: 10px;
    list-style-type: none;
    font-size: 25px;
    margin: 0;
}

a {
    text-decoration: none;
    color: forestgreen;
}

＆＃13;

<!DOCTYPE HTML>

<html>
    
    <head>
        <title>Home | Business</title>
        <link rel = "stylesheet" href = "style.css">
        <!--fonts-->
        <script src="https://use.typekit.net/yhm2vpr.js"></script>
        <script>try{Typekit.load({ async: true });}catch(e){}</script>
    </head>
    
    <body class = "home_page">
        
        <!-- "banner" with logo and navigation options -->
        <div class = "header_container">
            
            <div class = "logo_container">
                <h1 class="logo">Business Name</h1>
            </div>
            
            <div class = "nav_container">
                <ul class = "nav_ops">
                    <li class = "option"><a href="#about us">about us</a></li>
                    <li class = "option"><a href="#classes">classes</a></li>
                    <li class = "option"><a href="#services">services</a></li>
                    <li class = "option"><a href="#get involved">get involved</a></li>
                    <li class = "option"><a href="#contact us">contact us</a></li>
                    <li class = "option"><a href="#donate">donate</a></li>
                </ul>
            </div>
            
        </div>
        
        <p>Hello, there!</p>
    </body>
</html>

＆＃13;

Answer 1

我可以看到两个选项

选项1 - 在 header_container

中的 nav_container 之后添加此内容

//html
<br class='clear'/>

//Styles
.clear {
  clear: both;
}

选项2 - 从logo_container和nav_container中移除浮动并使用header_container上的flex属性

.header_container {
  display:flex;
  justify-content: space-between;
  align-items: center;
}

如何将徽标和菜单选项设置为同一级别？

1 个答案: