Question

在阅读了如何创建水平列表（导航栏）之后，我想为当前页面添加标题以及同一行上的导航链接。在浏览器中查看文件时，标题和水平无序列表显示在不同的行上，即使它们的显示都设置为内联。造成这种情况的原因是什么？有一个简单的解决办法吗？

＆＃13;

.header {
    display: block;
    margin: auto;
}
#nav_bar ul li, #nav_bar h1{
    display: inline-block;
    border: 1px solid black;
}
#nav_bar a:link, #navbar a:visited {
    color: black;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>myWebpage</title>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
   <a href="http://example.com/"><img src="example.jpg" class="header" /></a>
    <div id="nav_bar">
      <h1>Home</h1>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="foo.html">Foo</a></li>
        <li><a href="bar.html">Bar</a></li>
        <li><a href="baz.html">Baz</a></li>
      </ul>
    </div>
  </body>
</html>

＆＃13;

Answer 1

您的ul未设置为内嵌块。默认情况下，ul是一个块级元素，因此您只需要将display:inline-block添加到ul。

Answer 2

如果您检查文档，则会看到您的列表不是内嵌块。

＆＃13;

.header {
    display: block;
    margin: auto;
}
#nav_bar ul, #nav_bar ul li, #nav_bar h1 { /* <-------------- this */
    display: inline-block;
    border: 1px solid black;
}
#nav_bar a:link, #navbar a:visited {
    color: black;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>myWebpage</title>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
   <a href="http://example.com/"><img src="http://lorempixel.com/200/80" class="header" /></a>
    <div id="nav_bar">
      <h1>Home</h1>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="foo.html">Foo</a></li>
        <li><a href="bar.html">Bar</a></li>
        <li><a href="baz.html">Baz</a></li>
      </ul>
    </div>
  </body>
</html>

＆＃13;

Answer 3

您需要添加一个浮点和一个边距才能正确对齐。

#nav_bar ul li, #nav_bar h1{
float: left;
margin: 1px;
display: inline;
border: 1px solid black;
}

为什么两个内联块元素不会保留在同一水平线上？

3 个答案: