0
245
Vistas¿Por qué un div con una altura pequeña (4px) no puede caber en un elemento? El elemento secundario se muestra fuera
Verifiqué que no era el ancho, configuré el elemento secundario para que tenga un 10% de ancho y solo un elemento
.pct-bar { height: 4px; background-color: rgba(121, 121,121,.3); .gogo { display: inline-block; // float: left; // If I set float, this problem will not occur width: 10%; height: 100%; background-color: #fff; } } <div class="pct-bar"> <span class="gogo"></span> </div> GIF:
La única forma que he encontrado hasta ahora es establecer float para el niño o display:flex para el padre, pero espero que eso responda la pregunta. El texto está traducido por un traductor, si tiene alguna pregunta, no dude en preguntar, gracias.
2 Respuestas
Responde la pregunta0
Para el elemento inline-block en línea, hay una altura de línea en el juego. Efectivamente, su elemento .gogo se encuentra en la línea de base del contenedor .pct-bar (que tiene una line-height predeterminada). Puede solucionar su problema agregando vertical-align: top; al elemento .gogo .
.pct-bar { height: 4px; background-color: rgba(121, 121,121,.3); } .gogo { display: inline-block; width: 10%; height: 100%; background-color: #f00; vertical-align: top; } <div class="pct-bar"> <span class="gogo"></span> </div>0
Puede establecer la altura mínima para .gogo
.gogo { ... min-height: 1px; }lo siento, te entendí mal.
tal vez mostrar: mesa; puede ser una opcion?