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>内容的出现有疑问。它出现在下一行，但我希望它旁边的文本框＆＃39; 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这可能对您的案例有帮助

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

如果这有用，请告诉我。

如何在文本框旁边放置span标记内容

1 个答案: