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

-1

有问题的网站正在进行中www.omegadesignla.com 为什么我的锚标签延伸800像素？

无法弄清楚为什么我顶部栏中的徽标中的锚标记延长了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%; 
}

来源

2014-10-18 Jarg7

也许将此元素的当前CSS/HTMl添加到您的答案？ – cm2 2014-10-18 04:27:32

抱歉，我添加了它 – Jarg7 2014-10-18 05:52:32

问题被编辑，请删除负面反馈这是一个简单的错误。 – Jarg7 2014-10-18 05:53:35

你的锚是扩大到800像素，因为它是在一个块级H1元素，扩展以填充所有可用空间。如果你希望它不要被800像素，可以设置宽度的H1，而不是.logo，并从.logo删除宽度：

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

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

您正在使用的HTML结构不是语义尽管 - h1元素应该适用于标题或顶级文本。为什么不把你的标志放在div或跨度上？

来源

2014-10-18 07:39:30

谢谢，我没有意识到它是在H1，我仍然是新来的，所以非常感谢帮助！ – Jarg7 2014-10-18 07:46:05

试试这个

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

和

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

来源

2014-10-18 04:50:21

试过这个，但没有工作 – Jarg7 2014-10-18 05:52:12

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

回答

相关问题