Cómo mantener 2 encabezados H3 en la misma línea sin que se superpongan en CSS y HTML

No use nunca la posición absoluta de CSS, ni siquiera el posicionamiento, a menos que sea una situación extrema exótica singular. Aún menos para una etiqueta de encabezado. Creo que el problema aquí es comprender que el posicionamiento absoluto es para un uso específico que no es su caso aquí, y el posicionamiento absoluto de un elemento de encabezado (contenido) no es el camino a seguir cuando se programa CSS. Arruina la accesibilidad, sí, sí, hará que las cosas se superpongan, incluso podría arruinar su SEO. Debe programar CSS para que los elementos html fluyan naturalmente en la página, muchos desarrolladores quieren usar demasiado CSS y de ahí provienen los errores, mantenerlo simple, lo más simple posible, cuanto menos diga, menos errores verá.

  • Así que solo usa algo como esto:

h3 {flotante a la izquierda; ancho: 46%; relleno: 2%}

  • O utilice la propiedad de recuento de columnas (no funcionará para IE9 o anterior) en el elemento contenedor:

div..doubleh3 {

recuento de columnas: 2;

espacio entre columnas: 1%;

}

más información: propiedad de recuento de columnas CSS3

  • O como lo mencionó Jason, puede usar la propiedad flex pero es el método menos confiable y se recomienda solo cuando necesita que ambos estén en un cuadro visible que tenga la misma altura (que no es el caso aquí)

más información: propiedad CSS flex

No recuerdo exactamente el problema, pero a veces la propiedad flex no funciona en Safari (no puedo recordar el error aislado exactamente en este momento)

Los encabezados son elementos de nivel de bloque, lo que significa que su comportamiento predeterminado es ocupar todo el ancho de la página o elemento principal.

Con CSS, puede anular el atributo de visualización de nivel de bloque y permitir que aparezcan en la misma línea de diferentes maneras.

No estoy seguro exactamente qué aspecto está tratando de lograr, así que aquí hay algunas opciones.

Encabezado 1 Encabezado 2

Encabezado 1

Encabezado 2

Encabezado 1 <—————————————————————————————————> Encabezado2

Encabezado 1

Encabezado 2

Encabezado ——————————————————— Encabezado

1 —————————————————————— 2

Contenido relacionado con el encabezado 1 ————————— Contenido relacionado con el encabezado 2

Encabezado 1>

Contenido relacionado con el encabezado 1

Encabezado 2

Contenido relacionado con el encabezado 2

Para obtener más detalles sobre cómo hacer el CSS usted mismo, recomiendo el sitio web CSS Tricks.

Para ver ejemplos completos, vea cómo la gente de Bootstrap lo hace. Sus estilos se ven geniales en la gama completa de navegadores y dispositivos. Tienen ejemplos de los patrones más populares. Según su pregunta, puede ser abrumador probar una instalación Bootstrap hoy. Está bien. Puede tomar prestados sus estilos navegando a un ejemplo, inspeccionando el código en las herramientas de desarrollo del navegador Chrome f12 y copiando y pegando ese código en su archivo. De esa manera, puede aprender de algunos de los mejores de la industria a medida que aumenta sus habilidades.

Primeros pasos · Bootstrap

Definitivamente deberías leer sobre Flexbox, el artículo de trucos de CSS es una gran introducción.

HTML

Hola

Mundo

CSS

div {
pantalla: flex;
}

Esto representaría los encabezados de 2 h3 en la misma línea.

Estoy tratando de entender por qué quieres hacer esto. Supongo que está aprovechando la propiedad de visualización, como display: en línea en el segundo encabezado, si está en un diseño de una sola columna. O pantalla: run-in. ¿O es que tiene un diseño de dos columnas y desea alinear elementos h3 verticalmente en las diferentes columnas? O …

Si, como sugiere su pregunta, un elemento h3 sigue directamente a otro h3 en el DOM, sin nada que intervenga, entonces especialmente, ¿por qué?

Puede mostrar todos los encabezados css para mostrar: bloque en línea.

Pero la mejor práctica es usar un encabezado con span debajo de ellos.

P.ej.

título 1 título2 título 3

Sin profundizar, te recomiendo que mires a flexbox

Sí mi amigo, es muy fácil. Simplemente visite cómo tener dos encabezados en la misma línea en html, obtendrá una solución completa aquí. contáctenos para cualquier tipo de sitio web y desarrollo de aplicaciones .

Use la visualización en bloque de línea en ambos h3.

h3 {
pantalla: bloque en línea;
}

usar atributo alto y ancho

Empleado: Nombre del empleado

Empleado: Nombre del empleado

Código que estoy usando para ambos encabezados h3:

h3 {

izquierda: 0;

altura de línea: 300 px;

margen: auto;

margen superior: -100px;

posición: absoluta;

arriba: 50%;

ancho: 100%;

}

Echa un vistazo a las otras cosas e intenta usar “float: left” para ambos h3