Tengo una lista y quiero aplicarle un borde inferior, esto es lo que quiero ingrese la descripción de la imagen aquí

Esto es lo que tengo hasta ahora. ingrese la descripción de la imagen aquí

Aquí está 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>

¿que me estoy perdiendo aqui? Cualquier ayuda será apreciada

1
user9964622 8 sep. 2018 a las 10:55

4 respuestas

La mejor respuesta

Otra opción además de la de Lazar Nikolic es usar una tabla CSS en lugar de una caja flexible. Después de todo, eso es lo que es; muestra datos tabulares.
Para que responda como lo desea, siempre puede usar una consulta de medios para convertirla nuevamente en una serie de bloques para que todo se muestre uno debajo del otro.

.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>
3
Mr Lister 8 sep. 2018 a las 08:30

El problema está dentro de su clase css para .data-right-bottom ul li span. Bórralo. Además, en display: flex en .data-right-bottom ul li deberías decir justify-content: space-between para separar dos tramos que tienes dentro. Esto le dará bordes que son tan largos como su contenido. Supongo que usó flex: 1 0 0; para que su lista sea receptiva, pero no se pudo hacer teniendo en cuenta que dijo que el ancho del elemento de la lista debería ser de 400 px.

1
Lazar Nikolic 8 sep. 2018 a las 08:19

Parece que estás intentando crear una tabla, ¿no? En caso afirmativo, debe usar una tabla HTML en lugar de una lista. Especialmente si desea que el contenido de la última columna tenga text-align: left; pero toda la columna esté alineada con el borde derecho de su bloque.

Los elementos de la lista (li dentro de ul) son independientes entre sí y no puede hacer que un tramo dentro de li tenga el mismo ancho variable que depende del ancho del tramo en otro li. La fila de la tabla, en cambio, cambia el ancho en función de su contenido.

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>
1
Oleksandr Kovpashko 8 sep. 2018 a las 08:49

Tal vez deberías cambiar el ancho de tu lapso a 200 px (el lapso son dos dentro de un "li").

0
Marco Messina 8 sep. 2018 a las 08:13