Estoy trabajando en la construcción de una lista básica de tareas pendientes.
Tengo una lista de elementos con la opción de eliminar para cada elemento al lado.
Tengo problemas para tener el espacio adecuado entre los elementos de la lista, a saber, "texto de tareas pendientes" y el icono "Eliminar".
Nota: soy nuevo en la programación web.
Puede establecer un ancho fijo en el elemento contenedor y luego usar el cuadro flexible:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .container { display: flex; background-color: grey; border: 1px solid darkGrey; width: 300px; padding: 10px 15px; } .title { flex: 1; padding-right: 3px; } </style> </head> <body> <div class="container"> <div class="title">sample text</div> <div>delete icon</div> </div> <div class="container"> <div class="title">long sample text for illustration purposes.</div> <div>delete icon</div> </div> </body> </html>