如何在输入文本字段旁边对齐悬停文本

Question

当我悬停在输入文本字段上时，悬停文本应该显示在输入文本框旁边，但在我的代码中，悬停文本显示在输入文字框下面。有人能给我一个解决办法吗。下面是我的代码。

label {
display: inline-block;
width: 84px;
}
span#typePrompt {
display: none;
}
input#userName:hover+span#typePrompt {
display: inline;
}
input#userName:focus+span#typePrompt {
display: inline;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-sm-7 col-md-offset-2 form-group">
<label class="col-md-6">User Name <span class="star">*</span></label>
<div class="col-md-6">
<form:input type="text" class="form-control" path="userName" id="userName" maxlength="100" />
<span id="typePrompt">Allow only letters</span>
</div>
</div>
</div>

Answer 1

您可以将input标记和span消息文本与display: flex;包装在一起，悬停后显示。悬停时设置为100%的input标记宽度

注意：我使用white-space: nowrap;表示不要打断消息文本行

label {
display: inline-block;
width: 84px;
}
.input-wrap{
display: flex;
align-items: center;
}
.input-wrap:hover input#userName,
.input-wrap input#userName:focus{
width: 100%;
display: inline-flex;
margin-right: 10px;
}
span#typePrompt {
display: none;
white-space: nowrap;
}
.input-wrap:hover span#typePrompt,
.input-wrap input#userName:focus+span#typePrompt{
display: inline;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container py-4">
<div class="row">
<div class="col-sm-7 col-md-offset-2 form-group">
<label class="col-md-6">User Name <span class="star">*</span></label>
<div class="col-md-6">
<div class="input-wrap">
<input type="text" class="form-control" path="userName" id="userName" maxlength="100" />
<span id="typePrompt">Allow only letters</span>
</div>
</div>
</div>
</div>
</div>

Answer 2

由于引导程序中的form-control类，您的代码无法工作
form-control类有width: 100%和display: block，所以span#typePrompt不能内联显示，所以它会换行
我使用d-flex类和w-50类来解决它。

label {
display: inline-block;
width: 84px;
}
span#typePrompt {
display: none;
}
input#userName:hover+span#typePrompt {
display: inline;
}
input#userName:focus+span#typePrompt {
display: inline;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-sm-7 col-md-offset-2 form-group">
<label class="col-md-6">User Name <span class="star">*</span></label>
<div class="col-md-6 d-flex">
<input type="text" class="form-control w-50" path="userName" id="userName" maxlength="100" />
<span id="typePrompt">Allow only letters</span>
</div>
</div>
</div>

Answer 3

我不知道语法形式：input？这是表单助手还是什么的？无论如何，正如@ProfessorAbronsius和SatoTakeru已经正确指出的那样，我改变了这一点。然后，我将输入和标签字段封装在一个表单标记中。

所以你的代码是正确的，除了形式：input。所以我的答案只是为了完整性和好奇心：输入到底是什么？

label {
display: inline-block;
width: 84px;
}
span#typePrompt {
display: none;
}
input#userName:hover+span#typePrompt {
display: inline;
}
input#userName:focus+span#typePrompt {
display: inline;
}

<form>
<div class="row">
<div class="col-sm-7 col-md-offset-2 form-group">
<label class="col-md-6">User Name <span class="star">*</span></label>
<div class="col-md-6">
<input type="text" class="form-control" path="userName" id="userName" maxlength="100" />
<span id="typePrompt">Allow only letters</span>
</div>
</div>
</div>
</form>