why border bottom is wider than list content? - html

Question

I have a list and I want to apply border bottom to it, here is what I want
here is what I have so far.
here is 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>
what am i missing here? any help will be apreciated

Answer 1

Another option besides Lazar Nikolic's one is to use a CSS table instead of a flexbox. After all, that's what it is; it displays tabular data.
To make it responsive as you wanted, you can always use a media query to turn it back into a series of blocks so that everything is displayed underneath each other.
.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

The problem is within your css class for
.data-right-bottom ul li span. Delete it.
Also, under display: flex in .data-right-bottom ul li you should say justify-content: space-between to separate two spans that you have inside. This will give you borders that are as long as your content is. I suppose you used flex: 1 0 0; in order for your list to be responsive, but it could not be done considering that you said that the width of your list item should be 400px.

Answer 3

It looks like that you're trying to create a table - aren't you? If yes, you should use an HTML table instead of a list.
Especially if you want that the content in the last column has text-align: left; but the whole column be aligned to the right border of your block.
List items (li inside ul) are independent of each other and you can't make one span inside li to have the same variable width depend on the width of the span in other li. Table row, in contrast, changes the width based on its content.
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

Maybe you should change the width of your span to 200px (Span are two inside a "li").