Question

我不太清楚为什么我似乎无法让这个菜单变为水平而不是垂直。我已经关注了许多社区帖子，使用浮动和内联块等组合，似乎我可能会遗漏一些东西。

这是代码;

  <div class="sidebar-left">
      <div class="sidebar-links">
        <a href="#"><i class="fa fa-tachometer"></i>1</a>
        <a href="#"><i class="fa fa-tachometer"></i>2</a>
        <a href="#"><i class="fa fa-tachometer"></i>3</a>
        <a href="#"><i class="fa fa-tachometer"></i>4</a>
      </div>
  </div>

.sidebar-left {
  width: 15vw;
  height: 0;
  position: fixed;
  background-color: black;
}

.sidebar-left .sidebar-links {
  margin: 20px auto;
}

.sidebar-links div {
  display: inline-block;
}

.sidebar-left .sidebar-links > a {
  display: block;
  text-decoration: none;
  padding: 20px 0;
  background-color: black;
  text-align: center;
  color: #b3bcc5;
  font-size: 0.75rem;
  font-weight: bold;
}

.sidebar-links a i.fa {
  display: block;
  font-size: 35px;
  margin-bottom: 5px;
}

http://plnkr.co/edit/g8G4bE3MwWl68aHglF6U?p=preview

这令我非常沮丧，因为我最初认为这样做很简单，事实证明这有点棘手。

我希望有人能指出我出错的地方！

由于

（只是为了确认：目的是使菜单水平，而不是垂直）。

Answer 1

只需在display: inline-block元素而不是a上使用display: block即可。 display: block导致元素占据父元素的整个宽度，从而使它们垂直堆叠。 display: inline-block使元素只与内容一样宽，并将它们水平堆叠。

http://plnkr.co/edit/se9mdVyTQ1qnJ1ZBrXYQ?p=preview

内联样式无法使用侧边菜单

1 个答案: