Centrar 3spans numa div 100% width

I-NOZex · June 8, 2013 at 05:34 PM

Bem, ando aqui com uns problemas e ja segui um monte de dicas, inclusive tentei usar as spans dentro de LI's, mas nada ta a resultar como quero, de momento está assim:

as spans nao teem tamanho definido, a DIV parent tem 100% de largura, o que eu queria era alinhar as 3spans, a 1a a esquerda, a 2a ao centro e a 3a á esquerda.

Quanto a codigo o que tenho:

html

<div class="buttons">
 <span>Gosto</span>
 <span>Favorito</span>
 <span>Download</span>
</div>

css

.buttons {
display: inline-block;
width: 100%;
margin-top: 5px;
}

.buttons > span {
margin: 0 2px;
padding: 0.45em 0.158em;
}

.buttons > span:first-child {
margin-left: 0;
}

.buttons > span:last-child {
margin-right: 0;
}

alguma fix/tip/tutorial?

cumpz 😉

Devexz · June 8, 2013 at 07:39 PM

Não sei se é isto que queres, basicamente independente do tamanho da div buttons o primento span fica à esquerda e o ultimo à direita, o do meio fica centrado...

<!DOCTYPE>
<html>
<head>
 <style>
 .buttons {
    display: inline-block;
    width: 300px;
    margin-top: 5px;
    text-align:center;
}
.buttons > span {

}
.buttons > span:first-child {
    float:left;
}
.buttons > span:last-child {
    float:right;
}
span
{
margin : auto;
}
 </style>
</head>
<body>
 <div class="buttons">
   <span>Gosto</span>
   <span>Favorito</span>
   <span>Download</span>
 </div>
</body>
</html>

I-NOZex · June 8, 2013 at 08:19 PM

afinal nao tava a dar pois havia outra classe a fazer overide ao span -.-

btw, ja ta centrado soque o do meio fica mais acima que os outros... i will keep trying algo diferente mas se te ocorrer algo diz 😉

Devexz · June 8, 2013 at 08:33 PM

o do meio fica centrado por causa disto:

padding: 0.45em 0.158em;

I-NOZex · June 8, 2013 at 09:07 PM

nup, essa classe afecta todos os span, e so o do meio fica mal...

padding so altera a "margem" interior...

nao sabes uma forma de fazer antes com uma lista? o mesmo resultado mas com ul, que acho que acabaria por ficar mais correcto pois as spans vao acbar por ser trocadas por buttons ou assim, tao ali mais so como placeholders...

yoda · June 8, 2013 at 09:27 PM

Usa listas em vez de div's e span's.

I-NOZex · June 9, 2013 at 10:37 AM

Usa listas em vez de div's e span's.

ya bem me parecia que seria mais correcto, no entanto qual o truque para depois as deixar as 3 spans ou buttons ou o que tiver dentro das LI centrado? de notar que eu quero deixar uma margem entre os elementos...

obrigado desde ja 😉

Devexz · June 9, 2013 at 11:19 AM

não estou a perceber onde é que está a tua dúvida.

text-align:center ?

I-NOZex · June 9, 2013 at 12:03 PM

tipo isto agora ta assim:

se reparares ele não esta a fazer "block" com a Ul de cima, ja tentei meter as 2 em display block, definir tamanhos para a de cima mas simplesmente esta debaixo fica sempre sobreposta :S

.detail > ul.counters {
margin-top: 5px;
}
.detail > ul.counters > li {
float: left;
font-size: 0.7em;
}
.detail > ul.counters > li:before {
background: url("images/icons.png") no-repeat scroll left center transparent;
content: " ";
padding: 9px;
}
.detail > ul.counters > li.likes:before {
background-position: 0px 8px;
}
.detail > ul.counters > li.downloads:before {
background-position: 0px -17px;
}
.detail > ul.counters > li.plays:before {
background-position: 0px -42px;
}
.detail > ul.counters > li.lenght:before {
background-position: 0px -68px;
}
.detail > ul.counters > li:after {
content: " ";
padding-right: 8px;
}
.detail > ul.buttons {
display: inline-block;
width: 100%;
margin-top: 5px;
text-align:center;
/*overflow:hidden:*/
}

.detail > ul.buttons > li {
/*float: left;
width: 30%;*/
display: inline-block;
}
.detail > ul.buttons > li:first-child {
margin-left: 0;
float: left;
}
.detail > ul.buttons > li:last-child {
margin-right: 0;
float: right;
}
.detail > ul.buttons > li > span {
margin: 0 auto;
padding: 0.45em 0.158em;
}

counters é a lista de cima e buttons a lista de baixo

				 <ul class="counters">
					 <li class="lenght"><time>99:99</time></li>
					 <li class="downloads">9999</li>
					 <li class="plays">9999</li>
					 <li class="likes">9999</li>
				 </ul>
				 <ul class="buttons">
					 <li><span>Gosto</span></li>
					 <li><span>Favorito</span></li>
					 <li><span>Download</span></li>
				 </ul>
				 </div>

e eu queria deixar tambem as spans expandidas totalmente, ja tentei meter as li com width 33% e as spans width 100%, mas sem efeito :S

Edited June 9, 2013 at 12:04 PM by I-NOZex

HappyHippyHippo · June 9, 2013 at 02:21 PM

<div class="buttons">
 <span>Gosto</span>
 <span>Favorito</span>
 <span>Download</span>
</div>

.buttons span {
 display: inline-block;
 margin: 0;
 width: 33%;
}

I-NOZex · June 9, 2013 at 05:02 PM

<div class="buttons">
 <span>Gosto</span>
 <span>Favorito</span>
 <span>Download</span>
</div>

.buttons span {
 display: inline-block;
 margin: 0;
 width: 33%;
}

soque eu preciso de uma margem entre elas, e com isso vai pelos ares :S

HappyHippyHippo · June 9, 2013 at 05:04 PM

soque eu preciso de uma margem entre elas, e com isso vai pelos ares :S

nesse caso só existe uma solução em CSS : saber o tamanho exacto do div .buttons

I-NOZex · June 9, 2013 at 05:06 PM

nesse caso só existe uma solução em CSS : saber o tamanho exacto do div .buttons

e tal so com js coisa que nao me agrada muito... bha, vou tentar mais algumas coisas, no entanto um grande obrigado a todos os qe responderam

brunoais · June 9, 2013 at 10:14 PM

@Devexz

Usa um doctype válido para o browser mostrar a página corretamente.

Devexz · June 9, 2013 at 10:20 PM

um doctype válide pode ser este?

<!DOCTYPE html>

penso que agora não é necessário por aquela lenga lenga toda, acho eu...

I-NOZex · June 9, 2013 at 10:30 PM

@Devexz

Usa um doctype válido para o browser mostrar a página corretamente.

HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

fonte: w3schools

logo acho que ta correcto como ele usou, a minha definição tambem está igual, no entanto ainda, uma vez que nao acabei o template, naovalidei o html & css...

Edited June 9, 2013 at 10:30 PM by I-NOZex

Devexz · June 9, 2013 at 10:31 PM

no meu código acima, em só pus <!DOCTYPE>, esqueçi de por html... deve ser isso.

brunoais · June 11, 2013 at 02:14 PM

Podes tentar:

Usas css para os spans serem inline-block, depois usas

white-space: nowrap

no div que contem os spans.

Algo do tipo:

.buttons{
white-space: nowrap;
}
.buttons span {
 display: inline-block;
 margin: 0 20%;
 width: 20%;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

Se queres uma margin fixa, podes tentar:

.buttons{
white-space: nowrap;
}
.buttons span:first-child {
 display: inline-block;
 margin: 0 20% 0 0;
 width: 20%;
 margin: 0 calc(10px) 0 0;
 width: calc(33.333% - 10px);
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.buttons span {
 display: inline-block;
 margin: 0 20% 0 0;
 width: 20%;
 margin: 0 0 0 calc(10px);
 width: calc(33.333% - 10px);
 -moz-box-sizing: border-box;
 box-sizing: border-box;
   background-color:green
}

exemplo:

http://jsfiddle.net/VKZmr/

I-NOZex · June 11, 2013 at 06:29 PM

é isso tudo @brunoais, obrigado 👍

Sign In

Centrar 3spans numa div 100% width

Recommended Posts

I-NOZex

Devexz

I-NOZex

Devexz

I-NOZex

yoda

I-NOZex

Devexz

I-NOZex

HappyHippyHippo

I-NOZex

HappyHippyHippo

I-NOZex

brunoais

Devexz

I-NOZex

Devexz

brunoais

I-NOZex

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information