Question

我正在处理我的导航，它目前采用列表样式。我怎样才能使它水平？

以下是CSS代码，我的网站是https://centrecorp.squarespace.com/

.main-navigation {
    .nav-font;
    float:right;
  ul {  
    padding-left: 0;

    li a {
      display: inline-block;
      color:@nav-color;

      ul {
        display: none;
      }

      &:not(:last-child) {
        margin-right: .5em;
      }

      &:hover > ul {
        display: inline-block;
        color:@nav-color-hover;
      }

      &.active-link > a {
         color:@nav-color-active;
      }

      &.active-folder > a {
      }
    }
  }
}

谢谢！

Answer 1

如果您希望列表项彼此相邻显示，请将其设置为display: inline或display: inline-block。

默认情况下，它们是block，默认情况下占用其父（内部）宽度的100％，因此放在彼此之下。

您也可以使用float: left，但浮动也会引入其他问题。例如，如果线条太长并且包裹，则所有项目必须完全相同，否则页面看起来会非常混乱。一般来说，对于工具栏，图库或任何此类（可选择包装的）项目行，通常最好使用display: inline-block而不是float: left。

因此，您可以将li a更改为两个图层，以便将display添加到li元素：

li 
  /* This is added to style the list items */
  display: inline-block;
  /* This is extra: hide the discs */
  list-style: none;

  /* This is extra extra: show a `|` inbetween the items instead. */
  &:before {
    content: "|";
  }
  &:first-child:before {
    content: "";
  }

  /* From here, it's the existing style of the links inside the list items. */
  a {
      display: inline-block; /* You may no longer need this line */
      color:@nav-color;
  ....

Answer 2

这是我觉得最适合这些的样板CSS。

/* reset */
ul,li { list-style:none; margin:0; padding:0 }
/* float */
ul li { display:block; float:left; }
/* clear floats */
ul:after {display:block; clear:both; visibility: hidden; content:"."; height:0;}

我们可以使用

li { display:inline; }或li { display:inline-block; }但我发现如上所示，在设置外观和感觉时最简单的麻烦。

很快就会出现box flex - 毫无疑问，我们很快就会采用这种做法

Answer 3

点击此链接：

http://www.w3schools.com/css/css_navbar.asp

利{显示：内联;}

如何设置导航风格

3 个答案: