将图标与其他内联文本在同一行上右对齐 - CSS

Question

我正在尝试将一些社交媒体图标与菜单右侧对齐，但我遇到了一些问题。图标到处都是！这是我的代码：

<div class="nav">
 <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#stories">Stories</a></li>
  <li><a href="#more-reads">More Reads</a></li>
 </ul>

 <i class="fa fa-facebook"><a href="#"></a></i>
 <i class="fa fa-twitter"><a href="#"></a></i>
 <i class="fa fa-envelope-o"><a href="#"></a></i>
</div>

和CSS：

.nav{
  border-bottom: 1px solid #ccc;
  height: 69px;
 }
.nav li{
  list-style-type: none;
  display: inline-block;
  padding: 20px 25px;
  border-right: 1px solid #ccc;
}

.nav li a{
  text-decoration: none;
  font-size: 1.5em;
  font-weight: 300;
  color:#4D4D4D;
  padding: 20px 25px;
}

正如您可能会说的那样，我也在尝试将 div 中的元素居中，但在我将其置于右侧之前我无法判断它是否有效。我试过将 i 标签向右浮动，但它仍然在其他所有内容的下方。

如果有人能帮助我那就太好了:)

Answer 1

试试这个

.nav {
  border-bottom: 1px solid #ccc;
  height: 69px;
  position: relative;
  margin: 0 auto;
}

.nav li {
  display: inline-block;
  text-align: center;
  list-style-type: none;
  float: left;
  padding: 20px 25px;
  border-right: 1px solid #ccc;
}

.nav ul {
  width: 70%;
  position: relative;
  margin: 0 auto;
}

.nav li a {
  text-decoration: none;
  font-size: 1.5em;
  font-weight: 300;
  color: #4D4D4D;
  padding: 20px 25px;
}

i {
  float: left;
  position: relative;
  display: inline-block;
}

.container {
  width: 100%;
  position: relative;
  margin: 0 auto;
}

<head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

<body>
  <header>
    <div class="container">
      <div class="nav">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#stories">Stories</a></li>
          <li><a href="#more-reads">More Reads</a></li>
        </ul>

        <i class="fa fa-facebook"><a href="#"></a></i>
        <i class="fa fa-twitter"><a href="#"></a></i>
        <i class="fa fa-envelope-o"><a href="#"></a></i>
      </div>
    </div>
  </header>
</body>

将图标与其他内联文本在同一行上右对齐 - CSS

Aligning icons to right on the same line as other inline text - CSS

html

css

icons

inline