En este artículo, aprenderemos los diferentes enfoques para hacer que los elementos div se muestren en línea. Esto les permitirá ocupar el espacio disponible horizontalmente en la pantalla en una línea.
Primero, crearemos un código HTML básico para los elementos div y aplicaremos diferentes estilos CSS para que se muestre en línea.
Propiedades CSS:
En este artículo, usaremos las siguientes propiedades CSS .
- Pantalla : Usaremos la propiedad display: flex y display: inline-block para mostrar los elementos div en línea.
- Flotador : Usaremos la propiedad float: left para mostrar los elementos div uno al lado del otro.
Enfoque 1: en este enfoque, hemos configurado display: flex y flex-direction: fila en el div principal de todos los elementos div. Debido a la propiedad flex-direction: row , todos los elementos dentro del div principal se mostrarán en una sola fila.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main {
display: flex;
flex-direction: row;
font-size: 30px;
color: green;
border: 4px dashed green;
padding: 5px;
width: 400px;
}
.main div {
border: 2px solid red;
margin: 10px 20px;
width: 100px;
}
</style>
</head>
<body>
<div class="main">
<div>Geeks</div>
<div>for</div>
<div>Geeks</div>
</div>
</body>
</html>
Producción:
Los usuarios pueden ver que todos los elementos div dentro del div principal se muestran en línea.
Enfoque 2: en este enfoque, aplicaremos la propiedad display: inline-block a todos los div que necesitamos mostrar en línea. La propiedad display:inline-block establecerá todos los elementos div uno al lado del otro.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
display: inline-block;
color: green;
border: 2px solid red;
margin: 10px 20px;
width: 120px;
font-size: 40px;
}
</style>
</head>
<body>
<div>Geeks</div>
<div>for</div>
<div>Geeks</div>
</body>
</html>
Producción:
Los usuarios pueden ver todos los elementos div que se muestran en línea.
Enfoque 3: en este enfoque, aplicaremos la propiedad float: left a todos los elementos div para mostrarlos en línea. Además, los usuarios pueden usar la propiedad CSS float: right si quieren mostrar todos los elementos div en el orden inverso desde el lado derecho.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
float: left;
color: green;
border: 2px solid red;
margin: 10px 20px;
width: 120px;
font-size: 40px;
}
</style>
</head>
<body>
<div>Geeks</div>
<div>for</div>
<div>Geeks</div>
</body>
</html>
Producción:
Los usuarios pueden ver en la siguiente imagen de salida cómo se ven todos los elementos div cuando aplicamos la propiedad float: left CSS a todos los elementos div.
Enfoque 4: En este enfoque, usaremos el elemento span en lugar del elemento div . Cuando el usuario necesita escribir solo texto dentro de la etiqueta div , puede usar la etiqueta span ya que todos los elementos span se representan en línea de forma predeterminada.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
span {
color: green;
border: 2px solid red;
margin: 10px 20px;
width: 100px;
font-size: 30px;
}
</style>
</head>
<body>
<span>Geeks</span>
<span>for</span>
<span>Geeks</span>
</body>
</html>
Salida: en la siguiente imagen de salida, los usuarios pueden ver cómo el elemento span se representa en línea.
En la siguiente imagen de salida, los usuarios pueden ver cómo el elemento span se representa en línea.
Publicación traducida automáticamente
Artículo escrito por shubhamvora05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA