El propósito de este artículo es mostrar elementos de párrafo como elementos en línea usando CSS. La propiedad de visualización en CSS se utiliza para colocar los componentes («div», «hipervínculo», «encabezado», etc.) en la página web. La propiedad de visualización se establece en línea . Tiene la propiedad predeterminada de etiquetas de «anclaje». Se utiliza para colocar el «div» en línea, es decir, de forma horizontal. La opción en línea de la propiedad de visualización ignora el «ancho» y la «altura» establecidos por el usuario.
Sintaxis:
display: inline;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#main {
height: 200px;
width: 200px;
background: teal;
display: inline;
}
#main1 {
height: 200px;
width: 200px;
background: cyan;
display: inline;
}
#main2 {
height: 200px;
width: 200px;
background: green;
display: inline;
}
.gfg {
margin-left: 20px;
font-size: 42px;
font-weight: bold;
color: #009900;
}
.geeks {
font-size: 25px;
margin-left: 30px;
}
.main {
margin: 50px;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<h2>
How to display paragraph elements
as inline elements using CSS?
</h2>
<p class="main">
<p id="main"> BLOCK 1 </p>
<p id="main1"> BLOCK 2</p>
<p id="main2">BLOCK 3 </p>
</p>
</body>
</html>
Producción:
Los navegadores compatibles se enumeran a continuación:
- Google ChromeInternet Explorer
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA