Question

有问题的网站正在进行中www.omegadesignla.com

无法弄清楚为什么顶栏中徽标中的锚标签延伸800像素。我不希望徽标的宽度像这样可点击，我如何将可点击区域减少到徽标本身的范围？请帮助，谢谢。

    <nav class="top-bar" data-topbar>
       <ul class="title-area">
        <li class="name">

          <h1><a href="#"><img class="logo" src="img/omegalogogood.png"></a></h1>
        </li>
        <li class="toggle-topbar menu-icon">
          <a href="#">Menu</a>
        </li>
      </ul>

      <section class="top-bar-section">

        <ul class="right">
          <li><a href="#pricing">About us</a></li>
          <li><a href="#">Contact us</a></li>

            <li class="has-dropdown">
              <a href="#">Services</a>
              <ul class="dropdown">
                <li><a href="#">Web Development</a></li>
                <li><a href="#">Print Media</a></li>
                <!-- <li class="active"><a href="#">Active link in dropdown</a></li> -->
              </ul>
            </li>
        </ul>
      </section>
    </nav>

CSS：

  .top-bar {
overflow: visible;
/*height: 3.75rem;*/
line-height: 2.813rem;
position: relative;
background: #333333;
margin-bottom: 0; 
}



.logo{
    width: 15%;
}

Answer 1

您的锚点正在扩展到800px，因为它位于块级别的h1元素中，该元素会扩展以填充所有可用空间。如果你不希望它是800px，你可以在h1上设置宽度，而不是在.logo上，并从.logo中删除宽度：

.top-bar h1 {
     width: 15%; /* or 20% or whatever */
}

.logo{
/*    width: 15%; */
}

您使用的HTML结构在语义上并不恰当，但h1元素应该用于标题或顶级文本。为什么不将您的徽标放在div或span中？

Answer 2

试试这个

.top-bar .name h1 a {
   width: auto;
   height: 100%;
}

和

.logo {
  /* width: 20%; comment out width in logo class*/
  height: 100%;
}

为什么我的锚标签延伸800像素？

2 个答案: