时间戳

首页 > 解决方案 > 对齐所有列表项

html - 对齐所有列表项

问题描述

我想完美地对齐所有列表项，但我做不到。如果您看到图像，因为第二个 li 有更多文本，这会导致它们不对齐。

与注释不同，我不能在人名上使用文本溢出。

边距和填充也不起作用。

请帮助我如何解决它。

我的代码结果

#data-table .list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  color: #97A1A9;
  font-size: .9rem;
  white-space: nowrap;
}

#data-table .list>* {
  padding: 1rem 2rem;
}

#data-table .list div:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#data-table .list div:first-child input[type="checkbox"] {
  margin-right: 7px;
}

#data-table .list div:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 221px;
}
<div id="data-table">
  <ul>
    <li class="list">

      <div><input type="checkbox">Customer Name</div>
      <div>Seller #</div>
      <div>Bill #</div>
      <div>Amount</div>
      <div>Due Date</div>
      <div>Bill Payment Date</div>
      <div>Notes</div>
    </li>

    <!-- Dummy -->

    <li class="list">

      <div><input type="checkbox">Roshan Ahmad Shaheen</div>
      <div>2523532</div>
      <div> 73457346735</div>
      <div>122.76k</div>
      <div>23-Jan-2021</div>
      <div> --</div>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, accusamus?</div>
    </li>
    <li class="list">

      <div><input type="checkbox">Roshan Ahmad</div>
      <div>2523532</div>
      <div> 73457346735</div>
      <div>122.76k</div>
      <div>23-Jan-2021</div>
      <div> --</div>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, accusamus?</div>
    </li>

标签： htmlcssflexbox

解决方案

如果不设置固定宽度，就无法在不同行上对齐 flexbox 元素。坦率地说，这是表格数据，因此您应该使用table.

或 CSS 表

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

#data-table ul {
  display: table;
}

#data-table .list {
  display: table-row;
  text-align: left;
  color: #97A1A9;
  font-size: .9rem;
  white-space: nowrap;
}

#data-table .list>* {
  padding: 1rem 2rem;
  display: table-cell;
}

#data-table .list div:first-child input[type="checkbox"] {
  margin-right: 7px;
}
<div id="data-table">
  <ul>
    <li class="list">

      <div><input type="checkbox">Customer Name</div>
      <div>Seller #</div>
      <div>Bill #</div>
      <div>Amount</div>
      <div>Due Date</div>
      <div>Bill Payment Date</div>
      <div>Notes</div>
    </li>

    <!-- Dummy -->

    <li class="list">

      <div><input type="checkbox">Roshan Ahmad Shaheen</div>
      <div>2523532</div>
      <div> 73457346735</div>
      <div>122.76k</div>
      <div>23-Jan-2021</div>
      <div> --</div>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, accusamus?</div>
    </li>
    <li class="list">

      <div><input type="checkbox">Roshan Ahmad</div>
      <div>2523532</div>
      <div> 73457346735</div>
      <div>122.76k</div>
      <div>23-Jan-2021</div>
      <div> --</div>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, accusamus?</div>
    </li>

推荐阅读