Afficher l'étendue sous la zone de texte

Dans le code ci-dessous, mon étendue est affichée sur le côté droit de la zone de texte. Je la souhaite sous la zone de texte. S'il vous plaît laissez-moi savoir ce qui peut être fait?Afficher l'étendue sous la zone de texte

<fieldset class="no_border"> 
    <div class="float_left"> 
     <label>Age in years:</label> 
     <br /> 
     <input readonly="readonly" type="text" class="effect" id="nominee_one_years" name="nominee_one_years" value="0" style="width:20%" /><span id="info_nominee_one_years">x</span> 
    </div> 
    <div class="float_left"> 
     <label>Relationship:</label> 
     <br /> 
     <input type="text" class="effect" name="nominee_one_relationship" id="nominee_one_relationship" style="width:95%" /><span id="info_nominee_one_relationship">x</span> 
    </div> 
    <div class="float_left"> 
     <label>Relationship:</label> 
     <br /> 
     <input type="text" class="effect" name="nominee_one_relationship" id="nominee_one_relationship" style="width:95%" /><span id="info_nominee_one_relationship">x</span> 
    </div> 



#nominee_details span { 
    margin-left: 0px; 
    color: #b1b1b1; 
    font-size: 11px; 
    font-style: italic; 
    display:none; 
} 
fieldset.no_border { 
    overflow:hidden; 
    border:0; 
    padding:0 0 10px 0; 
    margin:0; 
} 
.float_left { 
    float:left; 
    width:33%; 
}

autres portées sans DIV

<fieldset class="no_border"> 

     <label>Age in years:</label> 
     <br /> 
     <input readonly="readonly" type="text" class="effect" id="nominee_one_years" name="nominee_one_years" value="0" style="width:20%" /><span id="info_nominee_one_years">x</span> 
</fieldset >

JS Fiddle

j'ai fait 2 Situation

1er où se trouvent à l'intérieur fieldset et div comme indiqué ci-dessus et 2 où sont à l'intérieur fieldset

span pour le 1er cas ne sont pas obtenir rendu ci-dessous zone de texte durée pour la deuxième sont affichées correctement

si vous voyez mon jsFiddle vous comprendrez ce que je suis en train d'expliquer

Source

2013-08-01 Anonymous

http://jsfiddle.net/dwWww/5/

cela?

.float_left span { 
    display: block; 
}

Si vous pouvez utiliser jquery, d'abord, vous définissez display: none;

$(".float_left span").css("display","none");

Mais quand vous détectez une erreur faites juste:

$(".float_left span").css("display","block");

Ou tout simplement:

.addClass() // définir le bloc d'affichage

.removeClass() // affichage réglé aucun

Ou:

$(".float_left span").text("Error!!");

$(".float_left span").text('');

Mise à jour:

.float_left span, #nominee_details span { 
    display: block; 
}

http://jsfiddle.net/M8XQ6/

Source

2013-08-01 11:53:41

merci mais je veux afficher aucun à l'origine et sur l'entrée invalide ce serait le bloc d'affichage –

donc au-dessus du code ne fonctionnera pas pour moi toute autre suggestion? –

@FakhruddinUjjainwala, voir la mise à jour s'il vous plaît. –

span est un élément en ligne, vous pouvez utiliser un élément de niveau bloc tel que div ou p ou définissez display:block sur la plage ou placez un <br/> juste avant l'étendue. Vous cherchez

Source

2013-08-01 11:50:55 Mir

Cela devrait être un commentaire, sûrement. – Albzi

cela peut vous aider à ce l'exemple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 

<title>inputs and spans</title> 

<style type="text/css"> 
body { 
background-color:#eee; 
} 
#container { 
width:460px; 
padding:10px 19px 5px; 
border:3px double #999; 
margin:auto; 
background-color:#ddd; 
} 
#container div { 
clear:both; 
margin-bottom:5px; 
text-align:center; 
overflow:hidden; 
} 
.inpright,.spnright { 
width:142px; 
float:right; 
} 
.inpleft,.spnleft { 
width:142px; 
float:left; 
} 
.spnright,.spnleft { 
text-align:center; 
} 
</style> 

</head> 
<body> 

<form action="#"> 

<div id="container"> 

<div> 
<input class="inpright" type="text" value="inpt3"> 
<input class="inpleft" type="text" value="inpt1"> 
<input class="inpcenter"type="text" value="inpt2"> 
</div> 

<div> 
<span class="spnright">span2</span> 
<span class="spnleft">span1</span> 
</div> 

<div> 
<input class="inpright" type="text" value="inpt6"> 
<input class="inpleft" type="text" value="inpt4"> 
<input class="inpcenter"type="text" value="inpt5"> 
</div> 

<div> 
<span class="spnright">span4</span> 
<span class="spnleft">span3</span> 
</div> 

</div><!-- end #container --> 

</form> 

</body> 
</html>

Source

2013-08-01 12:07:37 krishna

Afficher l'étendue sous la zone de texte

Répondre

Questions connexes