在CSS中将垂直列表转换为水平的问题

Question

我有问题CSS试图使我的列表从垂直到水平。我尝试删除display:block并添加display:inline但它没有用。还尝试删除宽度限制。

这是HTML中的列表。目前它是垂直的。如何让它显示为水平？

.nav-container {
  width: 250px;
  box-shadow: 0 1px 1px 1px black;
  transition: all 0.3s linear;
}

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  height: 50px;
  position: relative;
  background: linear-gradient(#292929, #242424);
}

a {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid black;
  text-decoration: none;
  display: block;
  height: 100%;
  width: 100%;
  line-height: 50px;
  color: #bbb;
  text-transform: uppercase;
  font-weight: bold;
  padding-left: 25%;
  border-left: 5px solid transparent;
  letter-spacing: 1px;
  transition: all 0.3s linear;
}

.active a {
  color: #B93632;
  border-left: 5px solid #B93632;
  background-color: #1B1B1B;
  outline: 0;
}

li:not(.active):hover a {
  color: #eee;
  border-left: 5px solid #FCFCFC;
  background-color: #1B1B1B;
}

span[class ^="icon"] {
  position: absolute;
  left: 20px;
  font-size: 1.5em;
  transition: all 0.3s linear;
}

@media only screen and (max-width: 860px) {
  .text {
    display: none;
  }
  .nav-container,
  a {
    width: 70px;
  }
  a:hover {
    width: 200px;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid black;
    box-shadow: 0 0 1px 1px black;
  }
  a:hover .text {
    display: block;
    padding-left: 30%;
  }
}

@media only screen and (max-width: 480px) {
  .nav-container,
  a {
    width: 50px;
  }
  span[class ^="icon"] {
    left: 8px;
  }
}

<div class="nav-container">
  <ul class="nav">
    <li>
      <a href="#">
        <span class="icon-home"></span>
        <span class="text">github</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-user"></span>
        <span class="text">front page</span>
      </a>
    </li>
    <li class="active">
      <a href="#">
        <span class="icon"></span>
        <span class="text">video</span>
      </a>
    </li>
  </ul>
</div>

Answer 1

Flexbox是一种非常适合此问题的显示类型。您可以在css-tricks.了解更多相关信息

你的问题可以通过将display：flex属性应用于ul和flex-flow：row nowrap来解决;属于李的财产