Question

我有一个导航栏，其中徽标和链接包含在同一个div（.header）中。我已经将链接置于中心但我似乎无法将图像放在同一条线上并以链接为中心。我尝试了几种方法，似乎无法改变任何东西。提前致谢。

.header {
  width: 80%;
  margin: 0 auto;
  height: 4.375rem;
  padding: 0 15px;
}
.header img {
  width: 30px;
}
.links {
  width: 50%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  line-height: 4.375rem;
}
.links a {
  text-decoration: none;
}
.links li {
  width: 50%;
  display: inline;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="normalize.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <nav class="navbar">
    <div class="header">
      <ul class="links">
        <li><a href="home.html">Text</a></li>
        <li><a href="link1.html">Text</a></li>
        <li><a href="link2.html">Text</a></li>
        <li><a href="link3.html">Text</a></li>
        <li><a href="link4.html">Text</a></li>
        <li><a href="link5.html">Text</a></li>
      </ul>
      <img src="logo.png">
    </div>
  </nav>
</body>

</html>

Answer 1

将img放入li？或者你是否因其他要求原因选择不这样做？

.header {
  width: 80%;
  margin: 0 auto;
  height: 4.375rem;
  padding: 0 15px;
}
.header img {
  width: 30px;
}
.links {
  width: 50%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  line-height: 4.375rem;
}
.links a {
  text-decoration: none;
}
.links li {
  width: 50%;
  display: inline;
}

<nav class="navbar">
    <div class="header">
        <ul class="links">
            <li><a href="home.html">Text</a></li>
            <li><a href="link1.html">Text</a></li>
            <li><a href="link2.html">Text</a></li>
            <li><a href="link3.html">Text</a></li>
            <li><a href="link4.html">Text</a></li>
            <li><a href="link5.html">Text</a></li>
            <li><img src="logo.png"/></li>
        </ul>        
    </div>
</nav>

Answer 2

您需要使用float: [left/right]或display: inline-block。目前，您的导航栏占据全宽，因为它隐式设置为display: block。您当前设置的所有width: 50%用于限制导航栏的内容。

Answer 3

在这种情况下，问题不在于图像，而在于<ul>。列表是块元素，因此默认情况下，后续元素将从下一行开始。最简单的解决方法是将<ul>的显示类型更改为inline-block。这样可以保持您需要的块方面（居中），但也允许图像与列表位于同一行。

.links {
  width: 50%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  line-height: 4.375rem;
  display: inline-block;
}

我需要帮助在同一个div中对齐图像和链接

3 个答案: