Elemento de nível de bloco flutuado: é necessário definir a largura, se sim, como?
https://stackoverflow.com/questions/406504
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Digamos que eu tenha caixas de texto, listas suspensas e botões de envio. Eles são todos os elementos embutidos. O que significa que as propriedades "oficialmente", estofamento, largura e altura devem ser ignoradas (na prática não realmente). Se eu seguisse o caminho certo para definir a altura como um botão, escrevia algo como Display: Block e, em seguida, definisse a altura. Mas há considerações de que um elemento de nível de bloco se expandiria inesperadamente, para que melhor eu definisse sua largura como algum valor fixo. O problema é que não sei sua largura, pois pode ser definido dinamicamente no texto do botão.
Outro cenário: desejo criar um menu via <ul> e <li>. Quero alinhado horizontalmente, com alguns itens agrupados à esquerda e com alguns esticados à direita. Ambos <ul> e <li> são elementos no nível do bloco. Como desejo que meu menu ocupe todo o espaço horizontal disponível, depois brinque com a altura dos itens e que os itens de menu sejam empurrados para os dois lados, o modo de bloco é bom para mim. Vou apenas usar o Float: Esquerda e Float: Direita para alcançar a tarefa. Mas, novamente, o uso deve definir uma largura para os elementos do menu, pois são elementos de bloco. Não conheço suas larguras porque o texto dos itens pode variar. Mas parece que tudo se renderiza muito bem como está.
Eu não notei nenhum problema com os dois elementos embutidos forçados a renderizar como elementos de bloco sem ser flutuado ou conjunto de largura, ou com o exemplo do item da lista. Funciona muito bem no IE7, FF3, Opera 9 e Safari, qualquer que seja a versão atual. A questão permanece: devo me preocupar com esses elementos inline para bloco ou elementos de bloco real flutuados, mas sem o conjunto de largura ou simplesmente deixar tudo como é? Estou perdendo alguma coisa ou é apenas mais uma dessas coisas que você simplesmente não deve esperar acertar?
Solução
Digamos que eu tenha caixas de texto, listas suspensas e botões de envio. Eles são todos os elementos embutidos. O que significa que as propriedades "oficialmente", estofamento, largura e altura devem ser ignoradas (na prática não realmente). Se eu seguisse o caminho certo para definir a altura como um botão, escrevia algo como Display: Block e, em seguida, definisse a altura. Mas há considerações de que um elemento de nível de bloco se expandiria inesperadamente, para que melhor eu definisse sua largura como algum valor fixo. O problema é que não sei sua largura, pois pode ser definido dinamicamente no texto do botão.
A menos que você esteja se referindo a Modelo de caixa do Internet Explorer Quirks, você não deve se preocupar com nada de expandir ou contratar inesperadamente. Contanto que você cuide de Normalização para variação do navegador, você vai ficar bem. Se você tem um efeito colateral inesperado e indesejado ao longo do caminho para projetar a glória, depra-a, pois esse é o erro do programador com o qual você enfrenta. O CSS pode ser peculiar, mas isso não é uma desculpa apropriada 95% do tempo para a maioria dos navegadores importantes. Os outros 5% sobre os quais não falamos.
É assim que eu entendo seu problema:
Você quer um menu de flutuado <li> Para que você tenha um menu horizontal que abrange a largura da viewport (o que seu usuário vê 'na janela do navegador') para ser consistentemente a largura total da viewport.
Parece que você está pensando em um design de largura fixa, quando realmente o que parece ser adequado aos seus propósitos é um design de largura de fluido. Isso significa que você cria um design que é 'elástico' e expande e contrata em relação ao tamanho da janela do navegador do usuário. Se você criou seu design antecipando as larguras de pixels definidas em cada elemento, provavelmente poderá encontrar uma maneira elegante de manter um cabeçalho e navegação na largura fluida, mas terá uma área de conteúdo principal de largura fixa. Você pode encontrar um meio feliz sem um redesenho completo. Este passo a passo provavelmente será o que você está procurando. Um bem Explicação dos termos de largura fixa e de largura de fluido Pode ser encontrado aqui se não estiver familiarizado com o jargão e quiser ver mais de perto essas idéias.
Mais um para a estrada:
Definindo uma largura em todos os elementos flutuados não é recomendado apenas, mas faz parte do padrão CSS2 conforme W3C.
- Angelina
Outras dicas
Se pegarmos a linha "oficial" que você menciona, a vida é fácil, pois não precisamos nos preocupar com larguras, alturas e para esses elementos.
Não pense que o pixel perfeito, não se preocupe com as minúcias da apresentação, siga os padrões, permita que o navegador e seus usuários defina estilos ...
(Se ao menos fosse realmente tão direto no mundo real "não offical")
Ok, suponho que minha pergunta não foi entendida corretamente. O que acontecerá se eu não definir largura para caixas flutuadas? Eu não posso definir, eu não sei. Porque depende do conteúdo. Todas as caixas encolherão sua largura de conteúdo? É assim que está funcionando na prática. E estou satisfeito com isso. Existe alguma confirmação oficial de que esse comportamento deve ser esperado?
Adicionado: eu fico algo interessante aqui: http://www.webmasterworld.com/css/3811603.htm
Sugiro verificar as recomendações para uma explicação mais técnica para as diferenças, mas simplesmente colocou, o comportamento dos carros alegóricos mudou entre CSS2 (1998) e CSS2.1 (alguns meses de 2005 e depois 2007). Por CSS2, era obrigatório definir uma largura em carros alegóricos, enquanto o "encolhimento" que você vê no FF3 é CSS2.1. Isso significa que os navegadores pré-Jul/2007 estão em conformidade com a recomendação relevante para o tempo de fabricação quando esticarem o contêiner DIV#a largura completa da viewport. (O que não explica a ópera, mas sempre fez suas próprias coisas.)
Nesse caso, então sou dispensado. Como mencionei, funciona no IE7 atual, FF3, Opera 9 e Safari.
Mais algum comentário?
(assumindo que se eu entendi seu problema)
Na maioria dos casos, você não precisa definir largura nos itens da lista. Mas (sim, há um mas aqui) se você tem um link com a exibição: Block (digamos que você queira usar a porta deslizante), precisa fazer um pequeno truque:
o html:
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
E CSS:
.menu li {
float:left
}
.menu li a {
display:block;
}
/* ===================== */
/* = and the IE6 trick = */
/* ===================== */
* html .menu li a {
width:1%;
white-space:nowrap;
}
Se você não fizer isso, o link será esticado para todos os pais. O link não o elemento da lista;) Fazer dessa maneira você define uma "largura da minúscula" para o IE6 e você não terá outros problemas.
