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

【问题标题】：How to align hover text beside input text field?如何在输入文本字段旁边对齐悬停文本？
【发布时间】：2021-12-28 05:23:33
【问题描述】：

当我将鼠标悬停在输入文本字段上时，悬停文本应显示在输入文本字段旁边，但在我的代码中，悬停文本显示在输入文本字段下方。谁能给我一个解决方案。下面是我的代码。

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>

【问题讨论】：

您的 HTML 中有错误 - <form:input ??
@ProfessorAbronsius 实际上，我使用
标签将用户数据存储到数据库中。
确实，有一个错字，但这不是问题中描述的问题的原因（文本显示在文本字段下方而不是旁边）。
OP，请编辑您的问题以包括您正在使用 twitter-bootstrap 并将 Bootstrap CSS 添加到您的可运行 sn-p。你有 2 票接近，因为人们没有意识到你的例子实际上是不完整的并且没有显示你遇到的问题。（我会为你做，但有一个待定的编辑需要先审核，我已经投票了。）
<form:form> 也无效。只需从 input 标签中删除 form: 即可。这肯定是一个错字。

标签： html css twitter-bootstrap

【解决方案1】：

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

注意：我使用 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>

【讨论】：

【解决方案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>

【讨论】：

或者您可以将d-inline-block w-50 类添加到您的input 标记中。
d-inline-block w-50 类仅适用于我。但是，问题是文本字段已更改，我只想要表单控件类文本字段。
然后你可以在你的自定义css文件中添加display: inlin-block !important;和width: 50%到.form-control类。

【解决方案3】：

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

所以你的代码是正确的，除了表单：输入。所以我的回答只是为了完整和好奇，实际上 form: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>

【讨论】：

如果你链接bootstrap，你可以找到问题。