html - 如何在输入字段后添加字体图标？

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

你可以尝试类似的东西

.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