Como alinho spans ou divs horizontalmente?

87

Meu único problema é fazer com que eles se alinhem com três lados e tenham espaçamento igual. Aparentemente, spans não podem ter largura e divs (e spans com display: block) não aparecem horizontalmente um ao lado do outro. Sugestões?

<div style='width:30%; text-align:center; float:left; clear:both;'> É o que tenho agora.

css html Thomas Owens
fonte
2
Por que você não quer usar uma mesa?
DOK de
63
Porque os dados não são tabulares.
Thomas Owens,
10
As respostas abaixo são adequadas, mas considere que usar uma mesa lhe dará menos dor de cabeça se acabar tornando as coisas mais complicadas. Não há problema em usar uma mesa se isso facilitar o seu trabalho. Seja pragmático! :-)
Rahul,
5
sério, não use uma mesa. Esse tipo de coisa é fácil com CSS.
Sam Murray-Sutton,
26
"Não há problema em usar uma mesa se isso torna seu trabalho mais fácil." é um conselho absolutamente terrível . Por favor ignore! :)
Bobby Jack,

Respostas:

77

Você pode usar divs com o float: left;atributo que fará com que eles apareçam horizontalmente um ao lado do outro, mas você pode precisar limpar os seguintes elementos para garantir que eles não se sobreponham.

jmcd
fonte
17
Na verdade, você pode apenas definir overflow: hidden. Consulte: stackoverflow.com/questions/323599/…
David Wolever
1
Acho que isso pode quebrar o layout em divs subsequentes. Por exemplo, se eu usar sua solução e tentar padding-leftno div à direita, ela será ignorada.
Sebastian Mach
2
Não há razão para pensar demais: <div style="display: in-line"></div><div style="display: in-line"></div>deve funcionar bem.
zoltar
usar float introduz uma série de novos problemas. overflow: hiddené a melhor solução.
saran3h
39

Você pode usar

.floatybox {
     display: inline-block;
     width: 123px;
}

Se você só precisa oferecer suporte a navegadores com suporte para blocos inline. Os blocos embutidos podem ter largura, mas são embutidos, como os elementos de botão.

Ah, e você pode querer adicionar alinhamento vertical: topo nos elementos para garantir que as coisas estejam alinhadas

runeh
fonte
1
o alinhamento vertical não funciona em elementos de nível de bloco. Neste caso, estamos falando de elementos cuja exibição foi definida como bloco embutido.
runeh
1
Inline-block agora é suportado em todos os navegadores de grau A, exceto IE6 / 7, mas há um hack para fazer com que o inline-block funcione no IE6 / 7.
Alexander Bird
12

Minha resposta:

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

Por quê?

Tecnicamente, um Span é um elemento embutido, porém pode ter largura, você só precisa definir sua propriedade de exibição para bloquear primeiro. No entanto, neste contexto, um div é provavelmente mais apropriado, pois estou supondo que você deseja preencher esses divs com conteúdo.

Uma coisa que você definitivamente não quer fazer é clear:bothdefinir os divs. Definir dessa forma significa que o navegador não permitirá que nenhum elemento fique na mesma linha que eles. O resultado, seus elementos se acumularão.

Observe o uso de display:inline. Isso lida com o bug de duplicação da margem ie6. Você pode resolver isso de outras maneiras, se necessário, por exemplo, folhas de estilo condicionais.

Eu adicionei um wrapper (# seja lá o que for), pois estou supondo que esses não serão os únicos elementos na página, então quase certamente você precisará separá-los dos outros elementos da página.

De qualquer forma, espero que isso seja útil.

Sam Murray-Sutton
fonte
Isso não pareceu funcionar quando eu cortei e
colei
1
Desculpe, erro de digitação; Eu deveria ter colocado um ponto e vírgula após cada uma dessas linhas, então funciona; Eu editei de acordo. Apesar de ter revisado esta questão novamente, eu sugeriria que o OP precisa adicionar um pouco mais de código ao seu exemplo. Como as respostas aqui mostram, há uma variedade de abordagens que podem ser usadas aqui e exatamente o que você usará dependerá do contexto.
Sam Murray-Sutton
4

você pode fazer: 

<div style="float: left;"></div>

ou 

<div style="display: inline;"></div>

Qualquer um fará com que os divs sejam dispostos horizontalmente.

Jeremy B.
fonte
3

Eu faria algo assim, pois dá a você 3 colunas de tamanho uniforme, espaçamento e escalas (regulares) iguais. Observação: isso não foi testado, portanto, pode precisar de ajustes para navegadores mais antigos.

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>
macaco faz
fonte
2

Eu usaria:

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%; 
}
.sidebox { 
float: right;
width: 30%; 
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox"> 
       SideboxContent
   </div>
</div>

É a primeira vez que uso esta 'ferramenta de código' do estouro ... mas devo fazer isso agora ...

Talevino
fonte
1

O que você gostaria de fazer é procurar layouts baseados em grade CSS. Este método de layout envolve a especificação de algumas classes CSS para alinhar o conteúdo da página a uma estrutura de grade. Está mais relacionado com o layout de impressão do que com base na web, mas é uma técnica usada em muitos sites para fazer o layout do conteúdo em uma estrutura sem ter que recorrer a tabelas.

Experimente isso para iniciantes da Smashing Magazine.

marcus.greasly
fonte
0

Observe a propriedade css Float. http://w3schools.com/css/pr_class_float.asp

Funciona com elementos de bloco como div. Alternativamente, o que você está tentando mostrar, as tabelas não são ruins se você está realmente tentando mostrar uma tabela com algumas informações.

usuario
fonte
Mas não é uma mesa. São apenas três coisas que quero que apareçam lado a lado.
Thomas Owens,
Página 404 não encontrada
Ali Yousefi
0

Eu tentaria dar a todos eles o display: block;atributo e o uso float: left;.

Você pode então definir widthe / ou heightcomo quiser. Você pode até especificar algumas regras de alinhamento vertical.

d1rk
fonte
0 
    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

outro ... tente usar float: left;ou right;, troque o widthpor outros valores ... deve funcionar ... note também que os 10% que não são usados ​​pelo div estão entre eles ... desculpe pelo inglês ruim :)

Talevino
fonte