foundation 5，li 在侧边导航中无法正常工作 class

Question

这是我要修复的代码，我想在一行中显示两个 links，link 2 和 link 3 但出于某种原因它添加了一个 <br/> 并将其拆分：

    <ul class="side-nav">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a> / <a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>

这是定义 side-nav class 的 css 部分以及其中 <li> 的行为方式，我找不到导致不需要的 <br/> 在我的代码中：

    .side-nav {
      display: block;
      font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
      list-style-position: outside;
      list-style-type: none;
      margin: 0;
      padding: 0.875rem 0; }
      .side-nav li {
        font-size: 0.875rem;
        font-weight: normal;
        margin: 0 0 0.4375rem 0; }
        .side-nav li a:not(.button) {
          color: #008CBA;
          display: block;
          margin: 0;
          padding: 0.4375rem 0.875rem; }
          .side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
            background: rgba(0, 0, 0, 0.025);
            color: #1cc7ff; }
          .side-nav li a:not(.button):active {
            color: #1cc7ff; }
        .side-nav li.active > a:first-child:not(.button) {
          color: #1cc7ff;
          font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
          font-weight: normal; }
        .side-nav li.divider {
          border-top: 1px solid;
          height: 0;
          list-style: none;
          padding: 0;
          border-top-color: #e6e6e6; }
        .side-nav li.heading {
          color: #008CBA;
          font-size: 0.875rem;
          font-weight: bold;
          text-transform: uppercase; }

Answer 1

你有 .side-nav li a:not(.button) - display:block;，所以每个标签 "take" 整行。您需要删除它，或更改它 display:inline-block;

.side-nav {
      display: block;
      font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
      list-style-position: outside;
      list-style-type: none;
      margin: 0;
      padding: 0.875rem 0; }
      .side-nav li {
        font-size: 0.875rem;
        font-weight: normal;
        margin: 0 0 0.4375rem 0; }
        .side-nav li a:not(.button) {
          color: #008CBA;
          /*display: block; commented this*/
          margin: 0;
          padding: 0.4375rem 0.875rem; }
          .side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
            background: rgba(0, 0, 0, 0.025);
            color: #1cc7ff; }
          .side-nav li a:not(.button):active {
            color: #1cc7ff; }
        .side-nav li.active > a:first-child:not(.button) {
          color: #1cc7ff;
          font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
          font-weight: normal; }
        .side-nav li.divider {
          border-top: 1px solid;
          height: 0;
          list-style: none;
          padding: 0;
          border-top-color: #e6e6e6; }
        .side-nav li.heading {
          color: #008CBA;
          font-size: 0.875rem;
          font-weight: bold;
          text-transform: uppercase; }

<ul class="side-nav">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a> / <a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>

foundation 5，li 在侧边导航中无法正常工作 class

foundation 5, li not correctly working inside side-nav class

html

css

zurb-foundation-5