почему нижняя граница шире, чем содержимое списка?

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

Похоже, вы пытаетесь создать таблицу, не так ли? Если да, вы должны использовать таблицу 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 2

Проблема в вашем классе CSS для .data-right-bottom ul li span. Удали это. Кроме того, в display: flex в .data-right-bottom ul li вы должны сказать justify-content: space -ween, чтобы отделить два пролета, которые у вас внутри. Это даст вам границы, которые соответствуют вашему контенту. Я полагаю, что вы использовали flex: 1 0 0; для того, чтобы ваш список был отзывчивым, но этого нельзя было сделать, учитывая, что вы сказали, что ширина вашего элемента списка должна быть 400px.

Answer 3

Другой вариант, кроме того, который использует Лазарь Николич, - это использование таблицы 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 4

Возможно, вам следует изменить ширину вашего диапазона на 200px (Span - это два внутри "li").