繁体   English   中英

为什么链接不填充li元素即使display:block?

Why link not filling li element even though display:block?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在使用superfish菜单,我遇到了一个我无法弄清楚的问题,虽然我确定答案很明显,但我只是错过了...

基本上我的元素没有扩展来填充它们包含的li元素,即使a元素设置为display:block

请看这里的例子:

http://www.spiritlevel.co.uk/fpatest/index_hover2.html

css在这里:

http://www.spiritlevel.co.uk/fpatest/css/superfish.css

http://www.spiritlevel.co.uk/fpatest/css/superfish-vertical.css

这是相关的HTML

<div id="homenav">

<ul id="nav" class="sf-menu sf-vertical">

<li id="company"><a href="*">COMPANY</a>
 <ul id="companymenu">
<li id="profilelink"><a href="*">Profile</a></li>
<li id="activitylink"><a href="*">Activity</a></li>
<li id="strategylink"><a href="*">Strategy</a></li>
<li id="teamlink"><a href="*">Team</a></li>
    <li id="financelink"><a href="*">Finance &amp; Governance</a></li>
 </ul>
</li>

<li id="development"><a href="*">DEVELOPMENT</a>
  <ul id="developmentmenu">
<li id="partnerslink"><a href="*">Development Partners</a></li>
<li id="sociallink"><a href="*">Social Responsibility</a></li>
  </ul>
</li>

  <li id="projects"><a href="*">PROJECTS</a></li>
  <li id="contact"><a href="*">CONTACT US</a></li>

 </ul>
</div><!--end homenav -->

我遇到的第二个问题是如何让第二级菜单出现在每个第一级链接的相同位置。 如果您将鼠标悬停在公司上方,那么它的第二级导航将显示在正确的位置。 但是如果你将鼠标悬停在开发上,它会显示1行太低 - 我希望它出现在与公司菜单相同的位置

有人可以帮我解决这个问题吗? 谢谢

2 个回复

从.sf-menu a.sf-with-ul(superfish.css line-93)中删除padding-right,并在#nav li a中添加宽度100%或140px(home.css第75行)。 我在你的网站上测试过它并且工作正常。 测试铬和ff。

您的链接未扩展以填充框的原因是因为它们向左浮动。 删除它,你应该没事。

1 display:block旁边的元素?

如何在添加了display:block的另一个元素旁边显示一个元素? 我添加了显示块,使其显示在新行上。 HTML CSS 我找到了jsfiddle: http://jsfiddle.net/3krea9r4/ ...

2015-05-09 14:48:13 0 32   html/ css
2 jQuery show()方法将“ li”条目重置为display:block

我有一个相对简单的页面,其中包含几个我希望能够在单击时显示的LI条目。 这个想法是为了模拟PowerPoint逻辑,当您单击页面时,其中的元素组会出现。 在父“ div”元素的“ click()”处理程序中,我具有: 它所作用的HTML是: 不幸的是,当show()命令完 ...

2009-11-25 00:22:42 3 4930   jquery
4 display:block拉伸链接宽度

我不知道为什么,但当我设置我的CSS display: inline &lt;img&gt; display: inline它工作正常。 但后来我写了display: block; 它正在整个屏幕上拉伸围绕元素的链接。 ...

2012-12-22 21:20:28 1 1665   css
6 CSS:jQuery:对第四个孩子以外的li元素应用margin-right(仅适用于display:block的元素)

jsFiddle (仅是一个示例,可以让您了解问题) 我被这个愚蠢的事情困住了,我会很感激我能得到的任何帮助。 我有一个固定宽度的无序列表,里面有多个列表项。 这些列表项是动态填充的。 由于用户在页面上的操作,可能将其中某些元素设置为display:none以隐藏。 目前,我正 ...

8 Display:block是否正在创建额外的填充?

我有2个具有相同类的span标签,但其中一个有一个额外的类,它仅添加了display:block 。 问题在于具有display:block样式的标签会产生额外的填充。 如果您将两个标签一个接一个放置,您会注意到填充大小的差异。 有没有办法用display:block删除标签的多余填充? ...

2014-05-28 01:28:48 3 79   html/ css
9 CSS:display:inline-block不可见填充

http://jsfiddle.net/QYtnL/ 如何删除烦人的填充,使所有div的高度为0px? 如果我要删除display:inline-block; ,它不见了,但我需要inline-block 。 ...

2013-03-12 16:00:34 2 3116   css
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM