Usuário Yahoo! interface Blog (YUIBlog)

CSS Dica Rápida: Caixas em linha com alinhamento inferior

15 de novembro de 2010 às 3:09 pm por Thierry Koblentz | Em CSS 101 , Desenvolvimento | 8 Comments

O desafio

Manter um botão enviar na parte inferior de uma caixa de linha, alinhado com controles de formulário posicionado abaixo do seu rótulo (Figura 1).

A parte complicada

Se o bloco que contém não é larga o suficiente para o botão enviar para fluir ao lado de outros controles, esse botão deve mostrar no início da caixa de próxima linha (de acordo com a RTL / LTR contexto), com espaço mínimo acima (Figura 2).

A solução

display:inline-block nos permitirá manter tudo no fluxo e na parte inferior da caixa de linha. Isto é porque inline-block gera uma caixa de bloco (ver 9.2.4 A propriedade 'display' ), que em si é fluiu como uma caixa de linha única, similar a um elemento substituído (ou seja, uma imagem).

A Markup

Nós rótulo de grupo e pares de controle dentro de div s.

 <form>
 <div>
 <label> </ label>
 <select> </ select>
 </ Div>

 <div>
 <label> </ label>
 <select> </ select>
 </ Div>

 <div>
 <label> </ label>
 <select> </ select>
 </ Div>

 <div>
 <input /> 
 </ Div>
 </ Form>

O CSS

 {display: block;} label
 div {
 display: inline-block;
 margin: 0 10px 10px 0;
 * Display: inline;
 zoom: 1;
 } 

Para posicionar os controles abaixo do seu rótulo associado, o estilo que as etiquetas com display:block (sem isso, esses elementos se mostram lado a lado).

Note-se que o estilo dos rótulos como o bloco não faz a expandir em todo o formulário, mas apenas através de caixas de seus pais - que compartilham a caixa mesma linha. Isso ocorre porque o interior de um inline-block é formatado como uma caixa de bloco, ea caixa em si é formatado como uma caixa de inline.

As duas regras últimos são para IE 6 e 7, que não suportam inline-block . Para esses navegadores, precisamos estilo div s como inline e use zoom . Note que este corte não é tão robusto como a coisa real, porque um elemento aninhado (não substituído) com um layout irá quebrar tudo, sentado em sua própria linha dentro do formulário. Então, a menos que você pretende dar tais elementos aninhados uma largura, não dar-lhes um layout.

A Demos

Ano 2010

Mês Janeiro

Dia 1

Ano 2010

Mês Janeiro

Dia 1

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

8 Comments »

RSS feed para comentários a este post.

1. Ie6 ole boa e 7

   Comentário por Jeffrey Gilbert - 16 de novembro de 2010 #

2. Tem certeza de que inline-block não é suportado em todos os IE6? Talvez display: inline-block modo não é totalmente * * suportado no IE6.

   Lembro-me depois de três anos em uma empresa de web escrito IE6 dia sites compatíveis a dia, eu reconsiderada este modo de exibição muitas vezes esquecido. Eu tinha assumido há muito tempo que não iria funcionar, mas ele fez. Eu tinha esses botões que eu refinada ao longo do tempo, que pode ter o texto de comprimento variável, em que, com a usual imagens de fundo arredondado canto um todo. Converti-los para inline-block e descobriram que funcionou muito bem no IE6, de modo que ajudou a reduzir a CSS um pouco. Um efeito colateral muito agradável foi que os botões já não quebra quando o botão é crammed em uma cela pequena mesa; algo que eu não poderia resolver com a minha linha anterior + line-height botões (estes eram botões verdadeiramente flexível para as empresas como websites, que não use float e modo de bloqueio, mas poderia ter as imagens de fundo, com as laterais arredondadas e hover etc imagem).

   Comentário por Fabrice - 16 de novembro de 2010 #

3. Ah, quirksmode diz inline-block apoio em IE6 / 7 é apenas para "natural" elementos inline. Isso explica por que o meu inline-block botões trabalhou no IE6 (eles eram feitos de uma SPAN>).

   No exemplo acima FORM Suspeito mudar o DIVs para SPANS iria fazê-lo funcionar no IE6, mas então ele provavelmente não importa ;-)

   Comentário por Fabrice - 16 de novembro de 2010 #

4. @ Fabrice

   Isto é porque display: inline-block dá elementos de um layout.
   Como uma nota lateral, este valor pode ser usado como um interruptor de layout. Por exemplo:

   a {display: inline-block;}
   a {display: inline;}

   O acima dará o como um layout (no IE).
   Note que isso não iria funcionar se ambas as declarações foram usadas na mesma regra.

   Comentário por Thierry Koblentz - 16 de novembro, 2010 #

5. A parte complicada Se o bloco que contém não é larga o suficiente para o botão enviar para fluir ao lado de outros controles, esse botão deve mostrar no início da caixa de próxima linha (de acordo com a RTL / LTR contexto), com espaço mínimo acima dela (Figura 2). O visor solução: inline-block nos permitem manter tudo no fluxo e na parte inferior da caixa de linha.

   Comentário por Hindi Responder SMS - 16 de novembro de 2010 #

6. a mesma abordagem também é usado aqui http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

   Comentário por ionut popa - 17 nov 2010 #

7. @ Ionut

   Anos atrás eu coloquei uma demonstração sobre tjkdesign.com para exibir miniaturas com base neste método:

   http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_-moz-inline-box_and_zoom.asp

   Eu tinha outras maneiras interessantes para mostrar os:

   O fundo da imagem é a linha de base:
   - http://tjkdesign.com/articles/thumbnail_and_caption/image_grid.asp

   A parte inferior do item é a linha de base:
   - http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_-moz-inline-stack_and_zoom.asp

   Exibir os itens em uma grade:
   - http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_table-cell_and_zoom.asp

   Comentário por Thierry Koblentz - 17 de novembro, 2010 #

8. @ @ Ionut e Thierry

   Eu também colocar algo no meu site há um tempo atrás. Pode ser um pouco mais fácil de entender, pois ele apenas tenta mostrar-lhe uma solução para o display: inline-block a forma como o consórcio padrões define.

   http://www.roydukkey.com/display-inline-block-zoom/

   Comentário por roydukkey - 24 de novembro, 2010 #

Deixe um comentário