¿cómo poner dos títulos o más en una misma línea?
angel_jeroumi
Mensajes publicados
56
Estado
Miembro
-
mr_demonicon Mensajes publicados 921 Estado Miembro -
mr_demonicon Mensajes publicados 921 Estado Miembro -
hola,
voy a colocar tres títulos de tamaño diferente en una misma línea con html 5 y css 3
aquí mi código fuente :
voy a colocar tres títulos de tamaño diferente en una misma línea con html 5 y css 3
aquí mi código fuente :
<head> <title> mi sitio </title> <meta charset="utf-8"/> <style> body { background-color: black; color: white; background-image: url("neige3.jpg"); background-repeat: no-repeat; } p { font-size: 100px; font-style: italic; font-weight: bold; text-decoration: underline; text-align: center; color: maroon; } .list { text-align: left; } .propos { text-align: right; } </style> </head> <body> <div> <p> Mon site </p> <h2 class="list"> list </h2> <h2 class="propos"> à propos </h2> </div> </body> </html>
4 respuestas
-
Hola,
Por definición un título no puede estar solo en una línea; pueden haber subtítulos pero no otra cosa, de lo contrario tu problema se soluciona a nivel del tipo; hay que que añadas en tu CSSh1{ display: inline; }y así sucesivamente (ejemplo:<head> <style> h1,h2,h3{ display: inline; }</style> </head> <h1> hello</h1> <h2> hello</h2> <h3> hello </h3>)
Los títulos son tipos de bloque, por lo que un salto de línea es obligatorio; los transformamos en inline (en línea, su nombre lo dice ^^) después existe el tipo inline-block, que es una mezcla entre ambos y te dejo que lo descubras.
Para más información: https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1606402-decouvrez-dautres-techniques-de-mise-en-page
Bonne soirée
--
Bonne continuation et n'oubliez pas que le risque zéro c'est dans vos rêves. -
-
cuando puse
display: inline;
perdí el alineamiento...
¿cómo hacerlo?-
utiliza mejor entonces el float
<head>
<title> mi sitio </title>
<meta charset="utf-8"/>
<style>
body
{
background-color: black;
color: white;
background-image: url("neige3.jpg");
background-repeat: no-repeat;
}
p
{
font-size: 100px;
font-style: italic;
font-weight: bold;
text-decoration: underline;
text-align: center;
color: maroon;
}
.list
{
float:left;
}
.propos
{
float:right;
}
<!--h1,h2 {display:inline-block;}-->
</style>
</head>
<body>
<div>
<p> Mi sitio </p>
<h2 class="list"> lista </h2>
<h3 class="propos"> à proposiciones </h3>
</div>
</body>
</html> -
-
-
-
-
-
