Question

这是我正在尝试修复的代码，我想在一行中显示两个链接，链接2和链接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类的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;，因此每个标记都“占用”整行。您需要将其删除，或更改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>

基础5，李没有正确地在侧导航班内工作

1 个答案: