javascript - 如何在文本框旁边放置 span 标签内容

Question

我有一个员工创建表。我正在使用 bootstrap为了响应。第一个字段是输入 id，因此我必须检查数据库中 id 的可用性。这是我的标记，

<div class="form-group control-group">
<label for="name" class="control-label col-xs-2 "><strong>Teacher Id:</strong>
</label>
<div class="col-xs-10">
    <div class="col-lg-5 controls">
        <input type="text" class="form-control" name="teacherId" id="teacherId" placeholder="Enter Teacher Id"><span class="status" id="status"></span> 
    </div>
</div>
</div>
<br>
<div class="form-group control-group">
<label for="name" class="control-label col-xs-2"><strong>Name:</strong>
</label>
<div class="col-xs-10">
    <div class="col-lg-5 controls">
        <input type="text" class="form-control" name="teacherName" id="teacherName" placeholder="Enter Name">
    </div>
</div>
</div>

<span class="status" id="status"></span>的内容将来自这样的 jquery ajax 调用，

<script>
$("#teacherId").change(function (e) { //user types teacherId on inputfiled
    var teacherId = $(this).val(); //get the string typed by user
    $(".status").html("<img src='<%=request.getContextPath()%>/images/ajaxLoader.gif' > <font color=gray> Checking availability...</font>");
    if (teacherId != '') {
        $.post('<%=request.getContextPath()%>/controller/TeacherIdCheckController', {
            'teacherId': teacherId
        }, function (data) {
            $('.status').html(data);
        });
    } else {
        $('.status').html('');
    }
});
</script>

这里的功能运行良好。我对 <span class="status" id="status"></span> 内容的外观有疑问.它出现在下一行，但我希望它位于“teacherId”的文本框旁边，这样我就可以在所有文本框之间留出相等的空间。任何人都可以帮助我。

Answer 1

您始终可以设置元素的样式以将其放置在您希望的任何位置。查看以下示例

HTML:

<div>
THE RED DIV
</div>
<span>NEXT TO RED DIV</span>

风格:

div{
height:100px;
width: 300px;
background-color: RED;   
}
span{
float:right;
margin: -103px 0px 0px 306px;
position: absolute;
}

检查这个fiddle实现。

同时检查这个 fiddle这可能对你的情况有帮助

如果您可以提供您页面的确切位置，我们也许可以提供正确的修复。

如果这对您有帮助，请告诉我。