Как выровнять текст при наведении курсора рядом с полем ввода текста?

ProgramBox

Как выровнять текст при наведении курсора рядом с полем ввода текста?

Post author:admin
Запись опубликована:4 января, 2022
Post category:Вопросы по программированию

#html #css #twitter-bootstrap

Вопрос:

Когда я наведу курсор на поле ввода текста, текст при наведении должен отображаться рядом с полем ввода текста, но в моем коде текст при наведении отображается под полем ввода текста. может ли кто-нибудь дать мне решение для этого. ниже приведен мой код.

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

 lt;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"gt;  lt;div class="row"gt;  lt;div class="col-sm-7 col-md-offset-2 form-group"gt;  lt;label class="col-md-6"gt;User Name lt;span class="star"gt;*lt;/spangt;lt;/labelgt;  lt;div class="col-md-6"gt;  lt;form:input type="text" class="form-control" path="userName" id="userName" maxlength="100" /gt;  lt;span id="typePrompt"gt;Allow only letterslt;/spangt;  lt;/divgt;  lt;/divgt; lt;/divgt;

1. Есть ошибка в вашем HTML — lt;form:input ??

2. @ProfessorAbronsius На самом деле, я использовал тег lt;форма:формаgt; для хранения пользовательских данных в базе данных.

3. Действительно, есть опечатка, но она не является причиной проблемы, описанной в вопросе (текст отображается под текстовым полем, а не рядом с ним).

4. OP, пожалуйста, отредактируйте свой вопрос, чтобы включить то, что вы используете twitter-bootstrap , и добавьте CSS начальной загрузки в свой запускаемый фрагмент. У вас 2 близких голоса, потому что люди не понимают, что ваш пример на самом деле неполный и не показывает проблему, с которой вы столкнулись. (Я бы сделал это для вас, но есть ожидающая правка, которую сначала нужно просмотреть, и я уже проголосовал за нее.)

5. lt;form:formgt; также не является действительным. Просто удалите form: этот input тег, и он заработает.. это, конечно, опечатка.

Ответ №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; }

 lt;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"gt;  lt;div class="container py-4"gt;  lt;div class="row"gt;  lt;div class="col-sm-7 col-md-offset-2 form-group"gt;  lt;label class="col-md-6"gt;User Name lt;span class="star"gt;*lt;/spangt;lt;/labelgt;  lt;div class="col-md-6"gt;  lt;div class="input-wrap"gt;  lt;input type="text" class="form-control" path="userName" id="userName" maxlength="100" /gt;  lt;span id="typePrompt"gt;Allow only letterslt;/spangt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;

Ответ №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; }

 lt;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"gt;  lt;div class="row"gt;  lt;div class="col-sm-7 col-md-offset-2 form-group"gt;  lt;label class="col-md-6"gt;User Name lt;span class="star"gt;*lt;/spangt;lt;/labelgt;  lt;div class="col-md-6 d-flex"gt;  lt;input type="text" class="form-control w-50" path="userName" id="userName" maxlength="100" /gt;  lt;span id="typePrompt"gt;Allow only letterslt;/spangt;  lt;/divgt;  lt;/divgt; lt;/divgt;

1. Или вы можете сделать это, добавив d-inline-block w-50 класс в свой input тег.

2. класс d-встроенного блока w-50 работает только для меня. но проблема в том, что текстовое поле изменено, мне нужно только текстовое поле класса управления формой.

3. Затем вы можете добавить display: inlin-block !important; и width: 50% в .form-control класс в свой пользовательский css-файл.

Ответ №3:

Я не знаю синтаксической формы:ввод? Это помощник по форме или что-то в этом роде? В любом случае, я изменил это, как уже правильно заметили @ProfessorAbronsius и СатоТакеру. Затем я завернул поле ввода и метки в тег формы.

Таким образом, ваш код был правильным, за исключением формы:ввод. Поэтому мой ответ просто для полноты картины и любопытства, что на самом деле представляет собой форма:ввод?

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

 lt;formgt; lt;div class="row"gt;  lt;div class="col-sm-7 col-md-offset-2 form-group"gt;  lt;label class="col-md-6"gt;User Name lt;span class="star"gt;*lt;/spangt;lt;/labelgt;  lt;div class="col-md-6"gt;  lt;input type="text" class="form-control" path="userName" id="userName" maxlength="100" /gt;  lt;span id="typePrompt"gt;Allow only letterslt;/spangt;  lt;/divgt;  lt;/divgt; lt;/divgt; lt;/formgt;