css - 为什么我的 <ol> 不显示元素编号？

Question

好吧，我不知道这个菜单是怎么回事，但是当它呈现时没有数字来确认哪个列表项是哪个。

我显然可以手动插入数字，但这就是 ol 的全部意义所在，所以如果我们能解决这个问题就太好了。

HTML:

<div class="go-to-menu module-dropdown" id="js-go-to-menu">
  <div class="list-head clearfix">
    <span class="item-title">Go To:</span>
    <span class="item-type">Data Level</span>
  </div>
  <ol class="go-to-menu--list">
    <li class="go-to-menu--item clearfix item-bold">
      <span class="item-title">General Property Info</span>
      <span class="item-type">Property</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Property Owner Company</span>
      <span class="item-type">Property</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Leasing Agent Company</span>
      <span class="item-type">Property</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Managing Agent Company</span>
      <span class="item-type">Property</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Vendors</span>
      <span class="item-type">Property</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Building Operation & HVAC Hours</span>
      <span class="item-type">Property</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Property Level Custom Fields</span>
      <span class="item-type">Property</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Projects Associated with this Property</span>
      <span class="item-type">Property</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Activities</span>
      <span class="item-type">Property</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Straight Line Rent Calculation (New)</span>
      <span class="item-type">Property</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Total Expenses In This Property</span>
      <span class="item-type">Property</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Capitalization Schedules</span>
      <span class="item-type">Property</span>
    </li>
    <li class="go-to-menu--item clearfix item-bold">
      <span class="item-title">General Lease Info</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Lease Term/Options</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix item-bold">
      <span class="item-title">Rentable Area/Subspaces</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix item-green">
      <span class="item-title">Base Rent</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix item-green">
      <span class="item-title">Free Rent</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix item-green">
      <span class="item-title">CPI & Percentage Increases</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix item-green">
      <span class="item-title">Operating Expenses & CAM</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix item-green">
      <span class="item-title">Real Estate Taxes</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix item-green">
      <span class="item-title">Utility Costs</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix item-green">
      <span class="item-title">Parking</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix item-green">
      <span class="item-title">Additional Costs and Credits</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix item-green">
      <span class="item-title">Management Fee</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix item-green">
      <span class="item-title">Occupancy/Sales Tax</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix item-green">
      <span class="item-title">Retail - % Rent</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Allocations</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Landlord TI/Tenant Contributions</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Subspace Level Custom Fields</span>
      <span class="item-type">Subspace</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Tenant's Broker</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Security Deposit</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Insurance/Asset Replacement Cost</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Sublease/Assignment Rights</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Tenant Sends Official Notices To</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Landlord Sends Official Notices To</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Holdover Costs/Restoration</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Amendments</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">LL Relocation/Audit Rights/Late Fees</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Maintenance and Repair</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Additional Clauses</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Lease Level Custom Fields</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Key Metrics</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Documents</span>
      <span class="item-type">Lease</span>
    </li>
    <li class="go-to-menu--item clearfix">
      <span class="item-title">Email Reminders</span>
      <span class="item-type">Lease</span>
    </li>
  </ol>
</div>

SCSS:

.go-to-menu {
    border: 1px solid $base-grey;
    display: none;
    font-size: 8px;
    margin: 0;
    padding: 0;
    z-index: 2;
    width: 300px;

    @media (min-height: $height-break-two) {
      font-size: 10px;
    }

    @media (min-height: $height-break-three) {
      font-size: 12px;
    }

    @media (min-width: $width-break-two) {
      width: 350px;
    }

    @media (min-width: $width-break-three) {
      width: 400px;
    }



    &.active {
      display: inline;
    }

    .go-to-menu--list {
      list-style: decimal;
      overflow: scroll;
      padding: 0;
    }

    .list-head {
      background: $base-grey--dark;
      color: $base-white;
      font-weight: bold;
      padding: 3px 6px;

      @include box-sizing(border-box);
    }

    .go-to-menu--item {
      border-bottom: 1px solid $base-grey;
      display: inline-block;
      padding: 0 6px;
      width: 100%;

      @include box-sizing(border-box);

      &:last-child {
        border: none;
      }
     }

     .item-bold {
       font-weight: bold;
     }

     .item-green {
       color: #009600;
     }

     .item-title {
       float: left;
       width: 70%;
     }

     .item-type {
       float: left;
       text-align: right;
       width: 30%;
     }
   }

我显然可以手动插入数字，但这就是 ol 的全部意义所在，所以如果我们能解决这个问题就太好了。

Answer 1

添加一些左填充，如果 li 垂直显示(默认)，数字应该显示。

.go-to-menu--list {
    list-style: decimal;
    overflow: scroll;
    padding: 0; /* << it's this one, it needs some left padding set */
}

请参阅以下简化演示:

.go-to-menu--list {
    padding: 0 0 0 20px;
}

<ol class="go-to-menu--list">
    <li class="go-to-menu--item">A</li>
    <li class="go-to-menu--item">B</li>
    <li class="go-to-menu--item">C</li>
</ol>

编辑

对于 li 水平设置为 inline-block，我建议使用 CSS counters .

.go-to-menu--list {
    counter-reset: number;
    padding: 0;
}
.go-to-menu--item {
    display: inline-block;
    padding: 0 6px;
}
.go-to-menu--item:before {
    counter-increment: number;
    content: counter(number) ". ";
}

<ol class="go-to-menu--list">
    <li class="go-to-menu--item">A</li>
    <li class="go-to-menu--item">B</li>
    <li class="go-to-menu--item">C</li>
</ol>