为什么边框底部比列表内容宽？

Question

我有一个列表，我想在其上应用边框底部，这就是我想要的

这是我到目前为止的内容。

这是jsfiddle：https://jsfiddle.net/Mwanitete/vr1c8tgo/10/

.data-right-bottom ul li {
  margin: 10px;
  list-style-type: none;
  display: flex;
  width: 400px;
  border-bottom: 1px solid green;
}

.data-right-bottom ul li span {
  flex: 1 0 0;
  width: 400px;
}

<div class="data-right-bottom">
  <ul>
    <li style="display: none;">
      <span>Total wrapping (tax incl.)</span>
      <span id="total_wrapping_right" class="total_wrapping_right">0,00 zł</span>
    </li>
    <li>
      <span>Total products (tax incl.)</span>
      <span id="total_product_right" class="total_product_wt_right">210,00 zł</span>
    </li>
    <li>
      <span>Total shipping (tax incl.)</span>
      <span class="total_shipping_right">
                    
                   12,00 zł
                        
                   </span>
    </li>
    <li class="order-subtotal">
      <span>Total (tax excl.)</span>
      <span class="total_price_without_tax_right">182,73 zł</span>
    </li>
    <li class="order-discounts" style="display:none">
      <span>Total discounts</span>
      <span class="total_discount_right">0,00 zł</span>
    </li>
    <li class="order-tax">
      <span>Total tax</span>
      <span class="total_tax_right">39,27 zł</span>
    </li>
    <li class="order-total">
      <span>Total</span>
      <span class="total_price_right">222,00 zł</span>
    </li>
  </ul>
</div>

我在这里想念什么？任何帮助将不胜感激

Answer 1

除了Lazar Nikolic之外，另一个选择是使用CSS表而不是flexbox。毕竟，这就是事实。它显示表格数据。
要使它响应所需，您可以始终使用媒体查询将其重新变成一系列块，以便所有内容都显示在彼此的下面。

.data-right-bottom ul {
  display: table;
}

.data-right-bottom ul li {
  list-style-type: none;
  display: table-row;
}

.data-right-bottom ul li span {
  display: table-cell;
  border-top: 1px solid green;
}

.data-right-bottom ul li span:last-child {
  padding-left: 10px;
  text-align: right;
}

@media all and (max-width: 17em) {
  .data-right-bottom ul li {
    display: block;
    border-top: 1px solid green;
  }
  .data-right-bottom ul li span {
    display: block;
    border-top: none;
  }
}

<div class="data-right-bottom">
  <ul>
    <li style="display: none;">
      <span>Total wrapping (tax incl.)</span>
      <span id="total_wrapping_right" class="total_wrapping_right">0,00 zł</span>
    </li>
    <li>
      <span>Total products (tax incl.)</span>
      <span id="total_product_right" class="total_product_wt_right">210,00 zł</span>
    </li>
    <li>
      <span>Total shipping (tax incl.)</span>
      <span class="total_shipping_right">
                
               12,00 zł
                    
               </span>
    </li>
    <li class="order-subtotal">
      <span>Total (tax excl.)</span>
      <span class="total_price_without_tax_right">182,73 zł</span>
    </li>
    <li class="order-discounts" style="display:none">
      <span>Total discounts</span>
      <span class="total_discount_right">0,00 zł</span>
    </li>
    <li class="order-tax">
      <span>Total tax</span>
      <span class="total_tax_right">39,27 zł</span>
    </li>
    <li class="order-total">
      <span>Total</span>
      <span class="total_price_right">222,00 zł</span>
    </li>
  </ul>
</div>

Answer 2

问题在您的CSS类中 .data-right-bottom ul li span。删除它。 另外，在.data-right-bottom ul li中的display：flex下，您应该说出justify-content：中间的空格以分隔两个内部的跨度。这将为您提供与内容一样长的边界。我想您使用flex: 1 0 0;来使列表具有响应性，但是考虑到您说列表项的宽度应为400px，因此无法做到这一点。

Answer 3

您似乎正在尝试创建表格-是吗？如果是，则应使用HTML表而不是列表。 尤其是如果您希望最后一列的内容为text-align: left;，但整个列都与块的右边界对齐。

列表项（li中的ul）彼此独立，并且您不能使li内部的一个跨度具有相同的可变宽度，这取决于另一li中的跨度宽度。相反，表格行根据其内容更改宽度。

table {
  width: 400px;
  border-collapse: collapse;
}
   
td {
  border-top:1px solid green;
  padding: 10px 0;
}

.price {
  text-align: left;
  width: 1%;
  white-space: nowrap;
}

<div class="data-right-bottom">
  <table>
    <tr>
      <td>Total products (tax incl.)</td>
      <td class="price">
        210,00 zł
      </td>
    </tr>
    <tr>
      <td>Total shipping (tax incl.)</td>

      <td class="price">
         12,00 zł
      </td>
    </tr>
  </table>
</div>

Answer 4

也许您应该将跨度的宽度更改为200px（跨度在“ li”中是两个）。