导航栏菜单中文本上方的图标

Question

我想在我的网站上制作一个菜单，它下面会有一个带有文字的图标，当我添加文字时，它会向右移动并将结尾<li> 关闭

带有图标但没有文字的导航栏

带有文本的导航栏（推掉最后一个 li）

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

.adminNavigation {
  width: 100%;
  height: 80px;
  background-color: #ebebeb;
  border-radius: 3px;
}
.adminNavOptions {
  display: table;
  margin: 0 auto;
  line-height: 80px;
}
.adminNavOptions li {
  display: inline-block;
  padding-right: 62px;
  padding-left: 62px;
}
.adminNavOptions li:hover {
  background-color: #000;
}

<div class="col-md-3"></div>

<div class="col-md-6">
  <div class="adminNavigation">
    <ul class="adminNavOptions">
      <li><i class="fa fa-play fa-3x"></i> test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
</div>

编辑 - 添加 Gleb Kemarsky 的代码后，它看起来像这样 - 图标不是垂直居中的，图标需要与文本居中，所以

ICONHERE
  txt

此外，栏不会根据我尝试添加 width:auto; 的 li 的数量而改变宽度

Answer 1

试试这个：

1. .adminNavigation

   • 删除display: table;。
   • 为padding-left 属性分配零值。

2. .adminNavOptions li

   • 使用display: block; float: left; 而不是display: inline-block;。
   • 使用text-align: center; width: 16.66666667%; 而不是padding-right: 62px; padding-left: 62px;。

3. 图标

   • <li> 的内容由line-height 属性垂直对齐。因此，如果您需要在文本上方放置一个图标，您也需要更改<li> 的属性。为此，我添加了.iconAbove 类。
   • 如果您将图标留在文本左侧，您可以通过position: relative; top: 9px;调整图标的垂直位置。

4. :悬停

   • 文本使用对比色。
   • 为第一个 <li> 和最后一个设置 border-radius 属性。

请检查结果：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

.adminNavigation {
  height: 80px;
  background-color: #ebebeb;
  border-radius: 3px;
}
.adminNavOptions {
  margin: 0;
  line-height: 80px;
  padding-left: 0;
}
.adminNavOptions .fa {
  position: relative;
  top: 9px;
}
.adminNavOptions .iconAbove {
  height: 80px;
  line-height: normal;
  padding-top: 11px;
}
.adminNavOptions .iconAbove .fa {
  display: block;      
  position: static;
}
.adminNavOptions li {
  display: block;
  float: left;
  text-align: center;
  width: 16.66666667%;
}
.adminNavOptions li:hover {
  background-color: #000;
  color: #fff;
}
.adminNavOptions li:first-child:hover {
  border-radius: 3px 0 0 3px;
}
.adminNavOptions li:last-child:hover {
  border-radius: 0 3px 3px 0;
}

<div class="col-md-offset-3 col-md-6">
  <div class="adminNavigation">
    <ul class="adminNavOptions">
      <li class="iconAbove"><i class="fa fa-play fa-3x"></i> test</li>
      <li><i class="fa fa-play fa-3x"></i> test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
</div>