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

1 个答案: