Question

我正在制作网站，但在导航栏中定位徽标时遇到了问题。

创建了该网站的测试版

徽标没有出现在它的空间中央。在较小的浏览器窗口中，它隐藏在导航栏的“主页”区域后面。

另外，我可以对导航栏进行代码改进吗？

再次感谢！

Answer 1

如果您缩进代码，则可以更轻松地查看正在进行的操作。尝试在其自己的div中添加图像并将其封装在p标签中，然后您将能够使用适当的css规则将其居中。使用css设置div时的提示添加颜色边框或背景，稍后可以删除它以帮助调整大小和定位。

   <div class="header">
       <div class="logo">
          <p><img src="images/logo.png" alt="fearless music" /></p>
       </div>

            <ul class="nav">
                <li class"currentpage"><a href="index.html">Home</a></li>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Special Link</a></li>
            </ul>

    </div>

Answer 2

它以空间为中心。您的列表项在中间对齐。 <li>标签的所有widts与<ul>

的总宽度不同

使用元素检查器，以便您可以很好地查看轮廓

Answer 3

您需要从ul中删除正确的填充。您将看到我们的左侧填充为40px。

header ul {
  padding-right: 0;
}

Answer 4

尝试将第31行更改为此 - 所以你可以看到你的徽标，你也可以在你的边距中添加回到li的中心位置，但我建议你从ul中取出徽标以便你可以拥有更多地控制它。

 .nav img {
/* vertical-align: middle; */
padding: 2px 0px;
 }

祝你好运，希望这会有所帮助：）

在导航栏中定位徽标的问题

4 个答案: