Question

我正在开发响应式导航。它的宽度是浏览器窗口的100％。计算其高度，使其中的6个锚点为正方形。我设法用“dummy-div”和padding-top技巧设置div的高度。我的下一个问题是设置容器填充的锚点高度。我真的想要修复菜单。因为我希望链接是正方形，所以我无法使用绝对值。

HTML 看起来有点像：

<div class="menu">
  <div class="dummy"></div>
  <a href="#">Link 1</a>
        .....
  <a href="#">Link 6</a>
</div>

以下是 CSS 的相关摘要：

    .menu {
         top:0;
         bottom:0;
         width: 100%;
         position: fixed;
      }

    .menu .dummy {
         float: left;
         padding-top: 20%;
      }

    .menu a {
         display: inline-block;
         position: relative;
         width: 20%;
         height: 100%;
      }

我的盒子的宽度非常好，但我在高度上挣扎。我做错了什么？

Answer 1

不确定您要对<div class="dummy"></div>做什么，所以我已将其删除。如果你想将6个菜单项作为正方形使用填充来创建形状：

.menu a {
    width: 15.666666667%;       /* (100/6)-1% */
    margin:0 .5%;               /* that 1% applied as margins left & right */
    padding:8.333333334% 0;     /* (100/6)/2 applied as padding top & bottom */
    line-height:0;              /* make sure text has no height */

    float:left;
    background:#303030;
    text-align:center;
    color:#fff;
}

http://jsfiddle.net/duncan/wazGx/

Answer 2

只需在锚标记内添加div。

<div class="menu">
  <div class="dummy"></div>
  <a href="#"><div>Link 1</div></a>
        .....
  <a href="#"><div>Link 6</div></a>
</div>

现在你可以通过css指定div的高度

.menu a div{
height:50px; width:100px;
}

响应式菜单，<a> height 100%</a>

2 个答案: