Как я могу добавить фонтик после поля ввода?

Question

У меня есть этот код:

<div class="form-group">
<label for="site-title">Site title<span style="color: red;">*</span></label> 
<input class="form-control" type="text" value="" id="site-title" name="" required> <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><i class="mdi mdi-information-outline"></i></a>
</div>

Я хотел бы добавить значок шрифта сразу после поля ввода, но в настоящее время он отображается под полем ввода.

Как я могу расположить его после поля?

Answer 1

У меня была ваша проблема, я сделал это. Я думаю, вы можете использовать из flex в css и: after в css или вы можете использовать тег i в теге span и теге div. Если он не работает, вы можете использовать из flex для иконки и после в css.

<div class="form-group">
<label for="site-title">Site title<span style="color: red;">*</span></label> 
<input class="form-control" type="text" value="" id="site-title" name="" required> <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><div><span><i class="mdi mdi-information-outline"></i></span></div></a>
</div>

Answer 2

Вы можете следовать следующему примеру:

    <div class="form-group">
       <label for="site-title">Site title<span style="color: red;">*</span></label> 
       <div class "form-input">    
         <input class="form-control" type="text" value="" id="site-title" name="" required> 
         <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
            <i class="mdi mdi-information-outline"></i>
         </a>
       </div>
    </div>

Вы можете добавить следующие CSS:

.form-group {
  display: block;
}
.form-group:after,
.form-input:after {
  content: "";
  clear: both;
  dispay: block;
}
.form-group label,
.form-input {
  display: block;
  width: 100%;
}
.form-group label span {
  display: inline-block;
  margin-left: 7px;
}
.form-group .form-control {
  width: 85%;
  float: left;
}
.form-group .form-control a {
 width: 15%;
 display: block;
 float: right;
}

Если вы используете загрузчик 4, его сетка состоит из flexbox. Вы можете получить полное руководство по этой ссылке flexbox. https://css -tricks.com / snippets / css / a-guide-to-flexbox

Answer 3

Вы можете попробовать что-то вроде

.input-container {
display: -ms-flexbox;
display: flex;
width: 100%;
margin-bottom: 15px;
}

.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}

.input-field {
width: 100%;
padding: 10px;
outline: none;
}

С помощью CSS намного проще выровнять элементы на вашей странице. Пожалуйста, ознакомьтесь с руководством W3Schools - оно простое и легко объяснимое https://www.w3schools.com/howto/howto_css_form_icon.asp