hacer un movimiento <a> etiqueta en una nueva línea, sin necesidad de utilizar "display: block"

Question

Me gustaría que los enlaces de navegación en this page a cada aparecerá en su propia línea:

A. Sin utilizar "display:block" - como la hace que la animación de desplazamiento ocupe todo el ancho del contenedor, no solo el elemento <a>.

B. Sin utilizar las etiquetas <br>, ya que finalmente estoy buscando crear un sitio receptivo con una navegación horizontal en pantallas más pequeñas.

Gracias por su ayuda.

Answer 1

¿Has probado float:left; clear:left?

Answer 2

envoltura que la navegación en ul, li:

<ul> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link 4</a></li> 
</ul> 

css:

ul {list-style: none} li {display: block}

Esto permite que el estilo de sus anclajes en consecuencia, mientras que los obliga a romper las líneas.

Answer 3

Puede envolver los <a> 's en <div>' s y aplicar CSS a los div 's a float:left, clear:left;

div.anchorContainer 
{ 
    float:left; 
    clear:left; 
} 

<div class="anchorContainer"> 
    <a href="#">text</a> 
</div> 

<div class="anchorContainer"> 
    <a href="#">text</a> 
</div> 

<div class="anchorContainer"> 
    <a href="#">text</a> 
</div>