Jump to content

Centrar 3spans numa div 100% width


I-NOZex

Recommended Posts

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:

V9oG2wu.png

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 😉

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net
Link to comment
Share on other sites

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>
  • Vote 1

Contador de calorias: caloriaspordia.com

Link to comment
Share on other sites

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...

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net
Link to comment
Share on other sites

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 😉

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net
Link to comment
Share on other sites

tipo isto agora ta assim:

wDBy2E0.jpg

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 by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net
Link to comment
Share on other sites

@Devexz

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

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

@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 by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net
Link to comment
Share on other sites

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/

  • Vote 1

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.