在文本框下方显示跨度答案

【问题标题】：Show span below text box在文本框下方显示跨度
【发布时间】：2013-08-01 11:47:24
【问题描述】：

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

<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 内的位置，如上所示，第二个字段集中在哪里

第一种情况的跨度未在文本框下方呈现秒的跨度正确显示

如果你看到我的 jsfiddle 你就会明白我要解释什么

【问题讨论】：

标签： css rendering html

【解决方案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() //设置不显示

或者：

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

和

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

更新：

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

http://jsfiddle.net/M8XQ6/

【讨论】：

谢谢，但我希望最初不显示任何内容，如果输入无效，它将是显示块
告诉我如果我写.float_left span { display: block; }，文本会显示在文本框下方
@FakhruddinUjjainwala，是的。
不，它仍然在右侧，我已经交叉检查 css 类是否已应用于跨度
只要使用：.float_left span, #info_nominee_one_years { display: block;}，如果你想应用相同的样式，或者如果你想排除所有具有特定 ID 的跨度.float_left span, span:not(#info_nominee_one_years) { display: block;}

【解决方案2】：

span 是一个内联元素，您可能想要使用块级元素，如 div 或 p 或将 display:block 设置为跨度或在跨度之前放置一个 <br/>。

【讨论】：

这当然应该是一条评论。