如何在文本框旁边放置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;
}

检查这个小提琴的实施。

还要检查这个小提琴 ，这可能对你的情况有所帮助

如果您可以提供页面的确切小提示，我们可以提供正确的解决方案。

如果这有用，请告诉我。