完整小提琴：

Question

我正在制作导航菜单（标签），单击时会下拉另一个（div）菜单。当时，下拉菜单（div）始终可见，用于测试目的。

一开始我添加了outer-bar div：

.outer-bar {
  position: relative;
  display: block;
  z-index: 1;
  text-align: center;
  top: 55px;
  background-color: black;
  height: 60px;
  width: 100%;
}

然后，对于菜单，down-bar（<ul>）元素：

.down-bar {
  list-style-type: none;
  font-size: 105%;
}

之后，对于导航按钮，我在<label>中使用了down-bar个元素：

   <div class="outer-bar">
        <ul class="down-bar" style="list-style:hidden">
            <li>
                <label id="down-nav-1" class="down-nav">Knives <b class="caret_down">&#9660;</b></label>
            </li>

With only labels inside, the navigation buttons would work perfectly, but then i added the dropdown (`div`) menu inside `<li>`.

            <div class="mainsizer">
                <div class="dropdown-menus" id="dropdown-menu-1">
                    <a href=/?search=M9%20Bayonet&type=weapon class="Text1"><label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet</a>
                    <a href=/?search=Karambit&type=weapon class="Text1"><label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit</a>
                    <a href=/?search=Bayonet&type=weapon class="Text1"><label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet</a>
                    <a href=/?search=Butterfly%20Knife&type=weapon class="Text1"><label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife</a>
                    <a href=/?search=Flip%20Knife&type=weapon class="Text1"><label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife</a>
                    <a href=/?search=Falchion%20Knife&type=weapon class="Text1"><label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife</a>
                    <a href=/?search=Gut%20Knife&type=weapon class="Text1"><label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife</a>
                    <a href=/?search=Shadow%20Daggers&type=weapon class="Text1"><label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers</a>
                    <a href=/?search=Huntsman%20Knife&type=weapon class="Text1"><label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife</a>
                    <a href=/?search=Bowie%20Knife&type=weapon class="Text1"><label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife</a>
                </div>
            </div>
        </li>

幸运的是，它也完美无缺，但第三个导航按钮Rifles已从其他导航按钮中删除。

请查看结果here。

完整小提琴：

Here.

问题＆amp;可能的原因：

但问题原因似乎显而易见，Rifles下拉div比其他更小。所以我认为这是为了平衡下拉菜单之间的水平对称性。

如果这就是问题的原因，那么我如何打破平衡并再次将标签放在同一条线上？

如果那不是原因，那么可能是什么？我怎么能解决它？

谢谢！

Answer 1

在vertical-align-top

上添加li

.down-bar li {
    display: inline-block;
    margin-right: 2%;
    margin-top: 15px;
    vertical-align: top;
}

当里面添加div时，<li>元素被放下

完整小提琴：

问题＆amp;可能的原因：

1 个答案: