Cuando enumero un conjunto de enlaces, van de izquierda a derecha en mi página web. Quiero que se apilen en su lugar, así que voy de arriba a abajo. ¿Qué necesito agregar para hacer eso?
Aquí está mi HTML:
<div id="Links" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;">
<a href="index.html">Index Page</a>
<a href="pagetwo.html">Schedule Page</a>
<a href="pagethree.html">To Top</a>
</div>
3 respuestas
Agregue este estilo a los enlaces, ocupará todo el ancho verticalmente. style = "display: block;"
<div id="Links" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;">
<a href="index.html" style="display:block">Index Page</a>
<a href="pagetwo.html" style="display:block" >Schedule Page</a>
<a href="pagethree.html" style="display:block" >To Top</a>
</div>
La etiqueta a
pertenece a los elementos en línea. Con la regla css display:block
puedes dejar que se comporten como elementos de bloque.
#Links a {
display: block;
}
<div id="Links" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;">
<a href="index.html">Index Page</a>
<a href="pagetwo.html">Schedule Page</a>
<a href="pagethree.html">To Top</a>
</div>
El camino rapido;
#Links {
width:650px;
background-color: #dcdcdc;
border: #00008b 2px dashed;
}
#Links > a {
display: block;
}
<div id="Links">
<a href="index.html">Index Page</a>
<a href="pagetwo.html">Schedule Page</a>
<a href="pagethree.html">To Top</a>
</div>
La forma semánticamente correcta;
#Links {
list-style-type: none;
width:650px;
background-color: #dcdcdc;
border: #00008b 2px dashed;
}
#Links > a {
display: list-item;
}
<nav id="Links">
<a href="index.html">Index Page</a>
<a href="pagetwo.html">Schedule Page</a>
<a href="pagethree.html">To Top</a>
</nav>
¡Salud!
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].