Question

在下面的代码中，我的跨度显示在文本框的右侧，我希望它在文本框下方。请告诉我可以做些什么？

<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%;
 }

没有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

我实际上有两种情况

第一个是在fieldset和div里面，如上所示和第二个位于fieldset内部

第一种情况的范围未在文本框下方呈现 span for second正确显示

如果你看到我的jsfiddle，你就会理解我想解释的是什么

Answer 1

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

你在找这个吗？

.float_left span {
    display: block;
}

如果您可以使用jquery，首先设置display: none;

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

但是当您检测到错误时，请执行以下操作：

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

或者只是：

.addClass() //设置显示块

.removeClass() //设置display none

或者：

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

和

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

<强>更新

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

http://jsfiddle.net/M8XQ6/

Answer 2

span是内联元素，您可能希望使用div或p等块级元素或将display:block设置为范围或放置{{1在跨度之前。

Answer 3

这可能会对你有所帮助这个例子

<!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>

在文本框下方显示跨度

3 个答案: