Los enlaces deberían estar cayendo, en lugar de ir a la derecha

Question

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>

html

1

kaitcrawford 3 oct. 2019 a las 19:25

Answer 1

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>

1

Hitech Hitesh 3 oct. 2019 a las 16:34

Answer 2

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>

0

kmgt 3 oct. 2019 a las 16:29

Answer 3

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!

1

Chris W. 3 oct. 2019 a las 16:45

Los enlaces deberían estar cayendo, en lugar de ir a la derecha

3 respuestas

Nuevas preguntas

html