Question

<!DOCTYPE html>
<html>
<body>

<header style="display: inline"><h1><a href="index.html">:::Lorem ipsum dolor sit amet</a></h1>

<nav>
<ul>
    <li><a href="kontakt.html" title="Kontakt informacije">Kontakt Informacije</a></li>
    <li><a href="galerija.html" title="Galerija slika">Galerija slika</a></li>
    <li id="empty"><a href="onama.html" title="O nama">O nama</a></li>
</ul>
</nav>
</header>
</body>
</html>

虽然<header style="display: inline">，但<h1>元素未与<ul>元素对齐，而<ul>元素位于<h1>下方。试过<header style="display: inline-block">，但无济于事。 display: inline属性不应该排成一行吗？

Answer 1

nav，h和header都是块元素。您必须将display: inline;添加到预定义块元素的所有元素。这段代码完成了这项工作：

header, nav, ul, li, h1 {
    display: inline;
}

您可以在下面的演示中找到它。

DEMO

Answer 2

尝试在display: inline-block和header：

上设置nav

<!DOCTYPE html>
<html>
  <body>
    <header style="display: inline-block"><h1><a href="index.html">:::Lorem ipsum dolor sit amet</a></h1></header>

    <nav style="display: inline-block">
      <ul>
        <li><a href="kontakt.html" title="Kontakt informacije">Kontakt Informacije</a></li>
        <li><a href="galerija.html" title="Galerija slika">Galerija slika</a></li>
        <li id="empty"><a href="onama.html" title="O nama">O nama</a></li>
      </ul>
    </nav>
  </body>
</html>

另外，请删除最后的无关</header>。

Answer 3

由于您的h1和nav标签位于标题内，您可以使用以下css：

h1, nav, li {
    display: inline-block;
}

另请参阅a link！了解你使用上述内容的原因。

并参考a link！了解块级元素。

Answer 4

    <!DOCTYPE html>
    <html>
    <body>

    <header ><h1 style="display: inline;float:left;"><a href="index.html">:::Lorem ipsum dolor sit amet</a></h1>

    <nav>
    <ul>
        <li style="display:inline;float:left;margin-top:35px;margin-left:20px;"><a href="kontakt.html" title="Kontakt informacije">Kontakt Informacije</a></li>
        <li style="display:inline;float:left;margin-top:35px;margin-left:20px;"><a href="galerija.html" title="Galerija slika">Galerija slika</a></li>
        <li  style="display:inline;float:left;margin-top:35px;margin-left:20px;" id="empty"><a href="onama.html" title="O nama">O nama</a></li>
    </ul>
    </nav>
    </header>
    </body>
    </html>

为什么我无法在一行中显示标题和导航链接？

4 个答案: