Question

我有一个水平的，930像素宽的菜单，在＆lt; 768px分辨率上延伸到整个页面的宽度。目前，只有内嵌锚标签是可点击的，但我发现在保持“响应性”的同时使整个li可点击是完全不可能的。我已经尝试了很多解决方案，现在我正在使用display：table on ul，display：table-cell on li和JS使它在整个容器中伸展。在＆lt; 768px上运行良好，但在930px时，锚和它们的li容器之间的填充变得不均匀。截图和代码如下。（最后一个菜单项显示：无，因为移动菜单版本，请忽略它）

那么，有没有办法让锚点填充为 UL 宽度的百分比？如果没有，我该如何解决？

HTML：

<!-- Responsive menu -->
 <nav class="btn1content btncontent main-menu-wrapper hidden">
  <ul class="main-menu" align="right">
   <li class="item cyan"><a href="../tmpl/index.html"  title="">Úvod</a></li>
   <li class="item orange active"><a href="../tmpl/aktuality.html"  title="">Aktuality</a></li>
   <li class="item yellow"><a href="#"  title="">Domény</a></li>
   <li class="item brown"><a href="#"  title="">Registrátori</a></li>
   <li class="item blue"><a href="#"  title="">CMS & Frameworky</a></li>
   <li class="item pink"><a href="#"  title="">Trendy</a></li>
   <li class="item green "><a href="#" title="">Zoznam</a></li>
   <li class="item sand"><a href="#"  title="">Sledovanie domén</a></li>
   <li class="item darkgray"><a href="#"  title="">Kontakt</a></li>
   <li class="item item-last"><a href="#" title=""></a></li>
  </ul>

  <!-- Clear -->
  <div class="clear"></div>
 </nav>

CSS：

.main-header .main-menu-wrapper  {
    margin: -3px auto;
    width: 100%;
    display: table;
    border-collapse: collapse;
    position: static;
    height: auto;
    background: #ffffff;
    border-top: none;
    border-bottom: none;
}

.main-header .main-menu-wrapper .main-menu {
    display: table-row;
}

.main-header .main-menu-wrapper .item {
    text-align: center;
    border-top-style: solid;
    border-top-width: 3px;
    border-left: none;
    border-right: none;
    height: auto;
    display: table-cell;
    padding: 0;
    width: auto;
}

.main-header .main-menu-wrapper .item a {
    padding: 42px 0;
}

屏幕截图（向上 - 现在看起来像，下面 - 它应该是什么样子）附：无法发布图片

http://i.stack.imgur.com/An4hh.png

演示正在进行中

http://statistikydomen.magnetica-hosting.sk/tmpl/index.html

Answer 1

改变这个：

.main-header .main-menu-wrapper .item a {
    padding: 42px 0;
}

对此：

.main-header .main-menu-wrapper .item a {
    display: block;
}

这将使您的锚点填充到其父级的宽度（li元素）。

table-cell的{{1}}显示将使浏览器计算每个项目的属性宽度。根据字幕的长度，甚至可能是浏览器/版本，这些宽度可能会略有不同，但我不会过分担心。响应并不总是像素完美。无论如何，你将获得一个非常好的元素划分，锚点将填充li的整个宽度，使整个菜单区域可以点击。

PS：

您必须在li中&写CMS & Frameworky作为&。
如果你实施其中一个技巧，你不需要'clear'div 这里描述：http://css-tricks.com/snippets/css/clear-fix/

上层div的百分比？

1 个答案: