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

Question

我想在我的网站上制作一个菜单，它会在下面有一个带有文本的图标，当我添加文本时，它会向右移动并将结束 <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

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

Answer 1

试试这个：

.adminNavigation
- 移除display: table;.
- 为 padding-left 属性分配零值。
.adminNavOptions li
- 使用 display: block; float: left; 而不是 display: inline-block;。
- 使用text-align: center; width: 16.66666667%;代替padding-right: 62px; padding-left: 62px;。
图标
- <li> 的内容按 line-height 属性垂直对齐。因此，如果您需要在文本上方放置一个图标，您还需要更改 <li> 的属性。为此，我添加了 .iconAbove class。
- 如果将图标留在文字左侧，可以通过position: relative; top: 9px;调整图标的垂直位置。
:悬停
- 对文本使用对比色。
- 为第一个 <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>

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

Icon above text in a navbar menu

html

css

navbar

twitter-bootstrap