Question

我的简单css导航栏出了问题。

我想将第二个hr元素移动到底部，如下所示：

enter image description here

我的HTML代码：

AttributeError at /api/users/1/photo/ 'str' object has no attribute 'name'

和css：

<!DOCTYPE html>
<html>
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
    <body bgcolor="#000000">
        <title>Terraria Extras</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <div id="section">
            <div class="logo">
                <h2>Terraria</h2>
                <h3>extras</h3>
            </div>
            <div class="navbar">
                <hr>
                <a href="#" id="menu-icon"></a>
                <li><b><a href="#" class="active">Home</a></b></li>
                <li><b><a href="download">Download</a></b></li>
                <li><b><a href="about">About us</a></b></li>
                <li><b><a href="twitter">Twitter</a></b></li>
                <hr>
            </div>
        </div>
    </body>
</html>

我很抱歉我的英语不好。我希望你理解我的意思。：）

Answer 1

在clear: left;上添加.navbar hr即可。

使用花车时，你总是希望在此之后“清除”花车，以阻止设计中发生的不良事情。看看https://css-tricks.com/the-how-and-why-of-clearing-floats/

li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
  overflow: auto;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar hr {
  border-color: #cc9900;
  float: none;
  clear: left;
}

<body bgcolor="#000000">
  <title>Terraria Extras</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <div id="section">
    <div class="logo">
      <h2>Terraria</h2>
      <h3>extras</h3>
    </div>
    <div class="navbar">
      <hr>
      <a href="#" id="menu-icon"></a>
      <li><b><a href="#" class="active">Home</a></b></li>
      <li><b><a href="download">Download</a></b></li>
      <li><b><a href="about">About us</a></b></li>
      <li><b><a href="twitter">Twitter</a></b></li>
      <hr>
    </div>
  </div>
</body>

Answer 2

在hr class中尝试此clear:both

.navbar hr {
    border-color: #cc9900;
    float: none;
    clear:both;
}

Answer 3

根据代码更改css，它将起作用

 .navbar hr {
    border-color: #cc9900;
    float: left;
    display: block;
    width: 100%;
 }

Answer 4

我想你想要一个内联列表，列出你添加float:left的原因，但它不是你能看到的正确方法。默认情况下，li元素为阻止，因此只需更改为display: inline-block

即可

我向你推荐this float property documentation 我还建议您使用li元素包含ul

第一个解决方案

html ：

    <div class="navbar">
        <hr>
        <ul>
            <li><a href="#" id="menu-icon"></a></li>
            <li><b><a href="#" class="active">Home</a></b></li>
            <li><b><a href="download">Download</a></b></li>
            <li><b><a href="about">About us</a></b></li>
            <li><b><a href="twitter">Twitter</a></b></li>
        </ul>
        <hr>
    </div>

css ：

li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    overflow: auto;
}

overflow属性让我发疯，但如果你认为它有用......

如果您只想在导航栏顶部和底部使用边框线，则可以使用属性border，以下第二个解决方案：

html ：

    <div class="navbar">
        <ul>
            <li><a href="#" id="menu-icon"></a></li>
            <li><b><a href="#" class="active">Home</a></b></li>
            <li><b><a href="download">Download</a></b></li>
            <li><b><a href="about">About us</a></b></li>
            <li><b><a href="twitter">Twitter</a></b></li>
        </ul>
    </div>

css ：

li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    overflow: auto;
}

.navbar {
    border-top: 1px solid #cc9900;
    border-bottom: 1px solid #cc9900;
}

并删除css内的.navbar hr属性

css：将hr元素移动到底部

4 个答案: