首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >引导3 Gentelella导航栏对齐到正确的问题

引导3 Gentelella导航栏对齐到正确的问题
EN

Stack Overflow用户
提问于 2016-07-02 16:14:28
回答 2查看 1K关注 0票数 1

从图块的面板中删除3个元素中的1个时,左侧的2个元素未完全与右侧对齐-左侧有1个空格。

之前:before

代码语言:javascript
复制
     <ul class="nav navbar-right panel_toolbox">
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> 
       <ul class="dropdown-menu" role="menu">
        <li><a href="#">Settings 1</a></li>
        <li><a href="#">Settings 2</a></li>
       </ul>
      </li>
      <li><a class="collapse-link"><i class="fa fa-chevron-up"> </i></a></li>
      <li><a class="close-link"><i class="fa fa-close"></i></a></li>
     </ul>

之后:after

代码语言:javascript
复制
     <ul class="nav navbar-right panel_toolbox">
      <li><a class="collapse-link"><i class="fa fa-chevron-up"> </i></a></li>
      <li><a class="close-link"><i class="fa fa-close"></i></a></li>
     </ul>

panel_toolbox的CSS如下所示:

代码语言:javascript
复制
.panel_toolbox {
 float: right;
 min-width: 70px; }

.panel_toolbox > li {
 float: left;
 cursor: pointer; }

.panel_toolbox > li > a {
 padding: 5px;
 color: #C5C7CB;
 font-size: 14px; }

.panel_toolbox > li > a:hover {
 background: #F5F7FA; }

导航栏的CSS -右:

代码语言:javascript
复制
.navbar-right {
 margin-right: 0; }

它能被修复吗?

EN

回答 2

Stack Overflow用户

发布于 2016-09-17 23:02:54

Rod,而不是:

代码语言:javascript
复制
.panel_toolbox > li {
float: left;
cursor: pointer; }

它应该是:

代码语言:javascript
复制
.panel_toolbox > li {
float: right;
cursor: pointer; }
票数 0
EN

Stack Overflow用户

发布于 2017-05-19 23:26:07

为什么不在每个元素上添加一个"pull-right“类呢?

代码语言:javascript
复制
<ul class"nav navbar-right panel_toolbox">
    <li class="collapse-link pull-right"></li>
    <li class="close-link pull-right"></li>
</ul>

它应该对你有帮助

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38158015

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档