Question

我已在网站横幅下的视图中添加了第二个nav元素。但是当屏幕以其默认分辨率展开时，菜单会偏向网站横幅的左侧。

我的目标是将菜单直接放置在与网站横幅一致的位置。我对页面设置进行了新的 JSFiddle link 来解释当前的定位问题。

我确实使用Chrome开发工具进行检查，它看起来像一个填充，导致定位以橙色突出显示：

菜单目前显示为中心，如下所示：

而我希望将其直接置于＆＃34;自助服务＆＃34;像这样的div：

我尝试在nav元素的自定义CSS上减少右边距，以便按照横幅进一步向右推进：

#chartNav {
    background-color: #614767;
    display: inline-block;
    padding: 10px 20px 10px 20px;
    margin: 0 5% 0 10%;
    padding-bottom: 20px;
    text-align: center;


}

但是导航菜单仍然是横幅的中心。

问题：

如何在父div下面定位导航元素中心？

这是包含横幅网站标题div的标记的要点，它包含导航菜单：

<div class="container-fluid">
        <div class="col-md-2 col-xs-2"></div>
        <div class="col-md-10 col-xs-6">
            <label class="main-title">Self Service</label>
        </div>

        <div class="row">


            <div class="col">

                <div class="col">

                    <nav>

                        <ul id="chartNav">
                            <li><a>Asset Selection:</a></li>
                            <li>
                                <a>All <span class="arrow">&#9660</span></a>
                                <ul class="sub-menu">
                                    <li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" />&nbsp;Option 1</a></li>
                                    <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />&nbsp;Option 2</a></li>

                                </ul>
                            </li>
                            <li><a>Date Range:</a></li>
                            <li>
                                <input class="input-sm" type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
                            </li>
                            <li><a>Profile:</a></li>
                            <li>
                                <a>Default <span class="arrow">&#9660</span></a>
                                <ul class="sub-menu">
                                    <li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" />&nbsp;Option 1</a></li>
                                    <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />&nbsp;Option 2</a></li>

                                </ul>
                            </li>
                        </ul>

                    </nav>

                </div>
            </div>               

        </div>

</div>

Answer 1

添加这个似乎解决了这个问题，前两行将导航容器与中心对齐，而第三行则删除了你提到的不必要的左边距。

.col-md-10{  
    width: 100%;
    text-align: center;
    margin-left: 0px;
}

查看https://jsfiddle.net/m7h541vb/3

如何在父div下定位导航元素中心？

1 个答案: