Permanezca todo alineado

[triqui]

Buenas tengo este div, con etiquetas <a> dentro, estoy simulando 4 botones en horizontal.

Pues bien en la mayoria de los navegadores se ve en horizontal, pero en algunos salta el ultimo botón de linea, y se ven 3 en horizontal y el último en la última linea.

Este es mi código html

Código HTML:

<div class="barraboton">
 
        <a href="http://www.miweb.com" >
            <img src="http://www.miweb.com/imagen.jpg" class="botonesnavegacionact"   />
        </a>
 
        <a href="http://www.miweb.com">
            <img src="http://www.miweb.com/imagen.jpg"  class="botonesnavegacionact"    />
        </a>
 
        <a href="http://www.miweb.com"   >
            <img src="http://www.miweb.com/imagen.jpg" class="botonesnavegacionact"    />
        </a>
        
        <a href="http://www.miweb.com">
            <img src="http://www.miweb.com/imagen.jpg"  class="botonesnavegacionact"    />
        </a>
 
        <a href="http://www.miweb.com"  target="_blank"  >
            <img src="http://www.miweb.com/imagen.jpg" class="botonesnavegacionact"   />
        </a>
 
 
    </div>
 

Y estas las css:

Código CSS:

div.barraboton{
text-align:center; 
width:100%; 
color:#ffffff;
}
IMG.botonesnavegacionact{
margin-right:0.2%;
margin-top:5px;
margin-bottom:2px;
margin-left:0.2%;
width:19%;
}
 

[daenor]

Muy buenos dias!
A ver si entendi bien.

Estas intentando hacer algo asi como un menu horizontal, pero cuando lo quieres alinear, se cae el ultimo boton, no es asi?

Bueno, creo igual que lo mas recomendable para la practica que intentas hacer es mediante el formato de lista:
<ul>
<li> BOTON A </li>
<li> BOTON B </li>
<li> BOTON C </li>
</ul>

Sin embargo, tambien suelo hacerlo mediante <div>s.

Una cosa a tener en cuenta es que cuando trabajas dentro de un div, es que si armas un grupo de links y quieres que queden horizontales, utilices "float:left" o right (este ultimo invierte el orden)
Finalmente, lo mas basico, recuerda que los anchos no superen el ancho del contenedor, es decir:
margenes + paddings + borders + anchos <= ancho del contenedor, de lo contrario desarma la forma.

Bueno, espero que sirva. Sinó lo vamos viendo.
Slds!

[rodeirojg]

Coincido con Daenor, la mejor manera es creando un menú en el formato de lista.
Si es así, recomiendo que le des las siguientes propiedades CSS al listado:

#navi {
list-style:none;
}
#navi li {
float:left;
display:block;
}
#navi li a {
display:block;
}

En caso que quieras hacer el menú con Divs, te recomiendo que chequees el ancho del div que contiene a todos estos Divs que conforman el menú, ya que si el ancho no dá, siempre va a hacer que uno o más divs vayan hacia abajo.

[triqui]

Pruebo y os cuento, muchas gracias a los dos

[Nano_Suarez]

Iniciado por rodeirojg

Coincido con Daenor, la mejor manera es creando un menú en el formato de lista.
Si es así, recomiendo que le des las siguientes propiedades CSS al listado:



En caso que quieras hacer el menú con Divs, te recomiendo que chequees el ancho del div que contiene a todos estos Divs que conforman el menú, ya que si el ancho no dá, siempre va a hacer que uno o más divs vayan hacia abajo.

Efectivamente, por mucho que flotes a la izquierda un div, debes adjudicarle el ancho:

Código CSS:

ul li {display: block; float:left; margin-right: 2%; width: 18%}
 

Si tienes 5 enlaces en el menú, el ancho de cada uno es de un 20%, a lo que debes restar el margin y padding de los elementos de la lista.