两列左(右)对齐-table

75 阅读1分钟
    <ul class="notATable">
      <li>
        <label>Label</label>
        <div>Value</div>
      </li>
      <li>
        <label>Label</label>
        <div>A different</div>
      </li>
      <li>
        <label>Label</label>
        <div>Another Value</div>
      </li>
    </ul>
    
    // css
    .notATable {
      display: table;
      list-style: none;
      padding-left: 0;
    }
    .notATable > li {
      display: table-row;
    }
    .notATable > li > * {
      display: table-cell;
      line-height: 20px;
      font-size: 14px;
      margin-top: 16px;
    }
    .notATable label {
      font-weight: bold;
      text-align: left;
      padding-right: 16px !important;
      white-space: nowrap;
    }
    .notATable div {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }