我在站点横幅下向 View 添加了第二个 nav
元素。但是当屏幕以默认分辨率展开时,菜单会向网站横幅的左侧倾斜。
我的目标是将菜单直接放置在与网站横幅一致的下方。我做了一个新的 JSFiddle link 的页面设置来解释当前的定位问题。
我确实使用 Chrome 开发工具进行了检查,它看起来像一个填充,导致定位以橙色突出显示:
而我想将其直接放置在“自助服务”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">▼</span></a>
<ul class="sub-menu">
<li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" /> Option 1</a></li>
<li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" /> 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">▼</span></a>
<ul class="sub-menu">
<li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" /> Option 1</a></li>
<li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" /> Option 2</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
最佳答案
添加这个似乎可以解决问题,前两行将导航的容器与中心对齐,而第三行删除了您提到的不必要的左边距。
.col-md-10{
width: 100%;
text-align: center;
margin-left: 0px;
}
关于css - 如何将导航元素中心定位在父 div 下?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38203540/