Foros del Web » Creando para Internet » CSS »

justificar elementos (botton) dentro de su contenedor

Estas en el tema de justificar elementos (botton) dentro de su contenedor en el foro de CSS en Foros del Web. Hola, Estoy intentando justificar (distribuir) unos bottones y no lo consigo. Pero si, funciona para los div-s. Hay alguna manera de hacer lo mismo para ...
  #1 (permalink)  
Antiguo 30/08/2015, 11:15
 
Fecha de Ingreso: mayo-2013
Mensajes: 191
Antigüedad: 11 años
Puntos: 10
justificar elementos (botton) dentro de su contenedor

Hola,
Estoy intentando justificar (distribuir) unos bottones y no lo consigo.
Pero si, funciona para los div-s.

Hay alguna manera de hacer lo mismo para los botones ?
(ya he pensado en aplicar estilo a los divs para que parezcan botones) pero, ¿habra otra manera?

Código HTML:
Ver original
  1.     #contenedor1, #contenedor2{
  2.         width:100%;
  3.         height:25px;
  4.         display: table;
  5.         text-align:justify;
  6.        
  7.     }
  8.     button, #contenedor2 div{
  9.         display:table-cell;
  10.     }
  11.  
  12.  
  13. <div id="contenedor1">
  14.     <button>button1</button>
  15.     <button>button2</button>
  16.     <button>button3</button>
  17.     <button>button4</button>
  18.     <button>button5</button>
  19.     <button>button6</button>
  20.     <button>button7</button>
  21. </div>
  22.  
  23. <!-- para los div-s funciona -->
  24.  
  25. <div id="contenedor2">
  26.     <div>button1</div>
  27.     <div>button2</div>
  28.     <div>button3</div>
  29.     <div>button4</div>
  30.     <div>button5</div>
  31.     <div>button6</div>
  32.     <div>button7</div>
  33. </div>

Otra cosita:
Si pongo en los contenedores width:100px por ejemplo ahora pasa al reves ... los botones colapsan y los divs no. Los divs se quedan en la misma linea aunque sobrepasan en ancho su contenedor

Me habria gustado conseguir que por un lado se alinean justificado pero con un tamaño mas pequeño del contenedor que colapsen.

Gracias

Última edición por matake; 30/08/2015 a las 11:39
  #2 (permalink)  
Antiguo 30/08/2015, 15:56
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: justificar elementos (botton) dentro de su contenedor

lo mas parecido que pude hacer fue esto ;)

Código CSS:
Ver original
  1. button {
  2.   -webkit-appearance:none;
  3.   border: 0;
  4.   background: transparent;
  5.   display:table-cell;
  6.   float: left;
  7.   padding: 0px 84.7px 0px 0px;
  8.   text-align: justify;
  9.   font-size: 16px;
  10.   font-family: 'Times New Roman';
  11. }

Demo:
http://codepen.io/anon/pen/MaWYPj
  #3 (permalink)  
Antiguo 31/08/2015, 16:09
 
Fecha de Ingreso: mayo-2013
Mensajes: 191
Antigüedad: 11 años
Puntos: 10
Respuesta: justificar elementos (botton) dentro de su contenedor

Gracias por responder y por dedicar tu tiempo en intentar una solucion.

Lo que pasa es que no me sirve porque con -webkit-appearance:none; quitamos la apariencia de los botones ....

Yo lo que quieria era justificar los botones (o sea que el boton se vee tambien no solo el texto )

Por otro lado, ya lo dije, podria hacer que los divs parezcan botonen poniendoles bordes color de fondo etc pero con los divs pasa lo que dije ... no colapsan como en una tabla ... se quedan en linea si cambias de dimension al contenedor ( o cuando redimensionas la ventana )

Gracias de todos modos por intentarlo.

Etiquetas: contenedor, elementos, justificar, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:52.