【问题标题】:Problems positioning logo in navigation bar在导航栏中定位徽标的问题
【发布时间】:2014-01-29 06:59:41
【问题描述】:

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

我在http://www.fearless-music.net/test创建了一个测试版网站

徽标未出现在其空间的中心。在较小的浏览器窗口中,它隐藏在导航栏的“主页”区域后面。

另外,对于我可以对导航栏进行的代码改进有什么建议吗?

再次感谢!

【问题讨论】:

标签: html css navbar


【解决方案1】:

它位于其空间的中心。您的列表项在中间对齐。 <li>标签组合的所有宽度与<ul>的总宽度不一样

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

【讨论】:

    【解决方案2】:

    您需要从 ul 中删除正确的填充。你会看到我们有一个 40px 的左内边距。

    header ul {
      padding-right: 0;
    }
    

    【讨论】:

      【解决方案3】:

      如果您缩进代码,则更容易看到发生了什么。尝试将图像添加到它自己的 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>
      

      【讨论】:

      • 感谢您的帮助!
      【解决方案4】:

      尝试将第 31 行更改为此 - 这样您就可以看到您的徽标,您也可以添加回您的边距以在 li 中居中,但我建议将徽标从 ul 中取出,这样您就可以拥有对其进行更多控制。

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

      祝你好运,我希望这会有所帮助:)

      【讨论】:

        猜你喜欢
        • 2018-10-05
        • 1970-01-01
        • 2020-12-16
        • 2020-12-29
        • 2018-03-17
        • 1970-01-01
        • 2021-05-26
        • 1970-01-01
        • 2017-03-25
        相关资源
        最近更新 更多