Question

我正在创建一个导航栏。我希望底部边框线显示在导航栏的底部，如下所示：

但是我从代码中得到的是：

我的HTML：

<!DOCTYPE html>

<html>
    <head>
        <title>batman</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div id="header">
            <a href="#" class="logo">
                <img src="./img/bat_logo.png" alt="batman" />
            </a>
            <nav>
                <ul style="list-style-type: none;">
                    <li><a href="#villains"> Villains </a></li>
                    <li><a href="#identity"> Identity </a></li>
                    <li><a href="#movies"> Movies </a></li>
                </ul>
            </nav>
        </div>
    </body>
</html>

我的CSS：

.logo {
    float: left;
    height: 50px;
}
#header {
    padding: 5px 0px;
    border-bottom: 1px solid;
}

Answer 1

在父级flex上使用justify-content: space-between，您也可以使用align-items垂直对齐。还将<div id="header">更改为<header id="header">，因为它似乎是一个语义上更合适的元素。

＆＃13;

img {
  max-width: 50px;
}
.logo {
  height: 50px;
  display: block;
}
#header {
  padding: 5px 0px;
  border-bottom: 1px solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav li {
  display: inline-block;
}

＆＃13;

<header id="header">
  <a href="#" class="logo">
    <img src="https://images.coplusk.net/projects/19697/steps/33014/normal_big_cartoon_batman_symbol_1250787261.jpg" alt="batman" />
  </a>
  <nav>
    <ul style="list-style-type: none;">
      <li><a href="#villains"> Villains </a></li>
      <li><a href="#identity"> Identity </a></li>
      <li><a href="#movies"> Movies </a></li>
    </ul>
  </nav>
</header>

＆＃13;

Answer 2

Yoy应该在#header上使用width和float，这是主要的包装器。有了这个，你应该添加ul li {float：left}

.logo {
    float: left;
    height: 50px;

}
#header {
    padding: 5px 0px;
    border-bottom: 1px solid;
    display:block;
    float:left;
    width:100%;
}

ul li{float:left}

Codepen链接：https://codepen.io/bravotanmoy/pen/qjZEbb

border-bottom没有按预期工作

2 个答案: