Question

我的导航栏有问题，尤其是我的DropDown菜单。

如果用户设备的宽度不足以显示我所有的导航栏链接，则我的导航栏会进入“子菜单” /“移动导航栏”，但是，加载此视图时，我的下拉菜单显示不正确（i '将在下面提供gif）。

https://gyazo.com/0be3c18b17ca6844b45504ccf7bef943

如GIF所示，我的“主页”菜单进入左上角，而“移动切换菜单”进入右下角，是否可以解决此问题？我仍然希望“主页”位于左侧，“移动菜单”位于右侧，我希望它们正确对齐（“左中心”和“右中心”），因为目前它们是对角的，看起来相当不错。由于某些原因，它还会增加菜单的高度，从而留出空白空间，这是不理想的，因为“移动视图”的重点是节省页面空间。

对解决对齐问题的任何帮助将不胜感激。

（在“移动视图”中，下拉菜单也与中间对齐，是否有办法像在“移动视图”中的其他项目一样使下拉子菜单与左侧对齐？）

CSS和HTML

$('#DelRow').click(function(){
    var rowCount = $('#TableBody tr').length;

        $("#TableBody").delegate("#DelRow", "click", function () {
            $(this).closest('tr').remove();
    });
});

Answer 1

对于第一个问题，请考虑在导航栏中的类别中添加“所有者”

<body>
<div class="navbar" id="myTopnav">

    <div class="holder">

        <a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
        <a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
        <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
        <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>

    </div>

    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
    </a>
</div>
</body>

完成此操作后，您将可以在css文件中对该持有人进行样式设置以使其适合屏幕中心。

.navbar .holder {

    text-align: center;

}

这应该可以解决问题，并将所有文本置于导航栏中。

移动视图中导航栏对齐和下拉菜单出现问题

1 个答案: