Como consertar a combinação de flutuação de flutuação IE7
-
20-09-2019 - |
Pergunta
Eu tenho uma classe Field_wrapper que contém o 3 sub Divs Field_label, Field_input e Field_error
Preciso colocar o campo, Field_label, Field_input lado a lado e Field_error abaixo dos dois primeiros.
Por favor, veja abaixo o código CSS para saber como eu consegui isso, meu problema é que não está funcionando no IE7. Clear Ambos aplicados ao Field_error não está funcionando.
Mesmo depois de pesquisar no Google por um longo tempo, não consigo encontrar um método adequado para corrigir isso sem adicionar a marcação HTML. Aconselhe a dica CSS ou qualquer outro método para evitar o código de marcação extra
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#FF0000;
float: right;
text-align:left;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name">
</div>
<div class="field_error">
<p>The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">
Address
</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
<div class="field_error">
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit">
</div>
</form>
Solução
Se você não quiser remover o flutuador esquerdo. Você pode usar este código de wrapper
.field_wrapper { display: inline-block; }
.field_wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .field_wrapper { height: 1%; }
.field_wrapper{ display: block; }
Funciona para mim todas as vezes (ie6 também)
Atualizar:
Eu olhei para isso de novo e mudei um pouco a marcação, também o tornou válido XHTML. Basta colocar a aula na tag P, você não precisa de uma div.
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#f00;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name" />
<p class="field_error">The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">Address</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit" />
</div>
</form>
Outras dicas
Remova Float: Direto de 'Field_error'
Deixe -me dizer uma coisa primeiro. Se você possui conteúdo flutuante em um contêiner, o contêiner nunca o conterá até que você defina a propriedade Overflow do contêiner para esconder ou também o fará flutuar. Curti
.field_wrapper
{
clear:both;
overflow:hidden;
}
Agora ele contém todo o elemento flutuante. Agora, para o seu erro, div, pois você está flutuando por seus elementos para a esquerda, então deixe claro: apenas à esquerda e ele funcionará.
Obrigado