Question

我一直在用这个搔头。我需要制作一个ul li菜单来减小宽度。当屏幕宽度减小时，最后一个li包裹到另一行。虽然我已经设法在我的一个菜单上进行了操作，但是由于li内容的大小不同，因此相同类型的css不会对此工作。我确实从以前的SO问题中找到了一个小提琴，但尝试这种方法完全打破了＃34; Shop By Products＆＃34;

的下拉样式

我试图通过减少视口来实现这样的功能。 http://jsfiddle.net/au9muz43/

，css非常简单

.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
}
.horizontal-style a {
display: block;
border: 1px solid red;
text-align: center;
margin: 0 5px;
background: #999
}

我在这里设置了一大块我的css和html的小提琴：https://jsfiddle.net/1Le63xk0/1/

甚至添加

display:table-cell;

到我的css行

.mega-menu li{float:left;text-align:center;position:relative;margin-right:15px;border:none;}

打破了产品的下拉列表

Answer 1

首先：;上缺少width:100%。其次，可以通过将显示更改为块和内联块来解决。表格显示用于表格，并且（可能）不打算在这种情况下使用。

.horizontal-style {
    display: block;
    width: 100%;
}
.horizontal-style li {
    display: inline-block;
    float:left;

}
.horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 5px;
    background: #999
}

div {
    background: #ccc
}

<div style="width: 100%;">
    <ul class="horizontal-style">
        <li><a href="#">Home</a></li>
        <li><a href="#">Shop By Products</a></li>
        <li><a href="#">Shop By Brand</a></li>
        <li><a href="#">Why Choose Us</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Offers</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

更好地了解this JSFiddle. StackOverflow代码段不支持调整大小。

Answer 2

所以快速结合两个小提琴，我注意到一些风格冲突了。我删除了对li / a的display:block次调用，并将其设为display:table-cell;（这就是它缩小的原因，而不是放到新行。

带来你所有的css，这只是修复某些div仍然被设计为块/内联块并将它们转换为表格格式的情况。

主要问题见于以下几行：

.mega-menu li a{color:#fff;outline:0;padding:12px 35px 0px 0px;text-decoration:none;display:block;font-weight:normal;text-transform:uppercase;}

.mega-menu li:hover a{color:#007dc5;position:relative;z-index:11;padding:4px 11px 3px 11px;}

你有大量填充推动每个div。

以下是 JSFiddle 。

编辑：更新只是为了让他的css更多。

编辑2：除了双重检查OP display属性之外，还有其他方式无法解释它。 OP没有回应解释小提琴的问题，所以据我所知，它有他要求的一切：缩小的导航，他的下拉工作相同。

响应性地调整mega菜单，以便li平等减少

2 个答案: