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

Question

我想在我的网站上制作一个菜单，下面会有一个带有文字的图标，当我添加文字时，它会向右移动并推送结束FactDetail.FactHeaderKey

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

带文字的导航栏（推送最后一段李）

<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;
}

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

<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>

此外，根据我尝试添加ICONHERE txt 的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. <强>：悬停

   • 为文本使用对比色。
   • 为第一个border-radius和最后一个设置<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 {
  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>