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

Answer 2

我遇到了问题，我这样做了。我认为您可以在CSS中使用flex和在CSS中使用：after 或者，您可以在span标签和div标签中使用i标签。如果它不起作用，则可以从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 3

您可以按照以下示例：

    <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

如何在输入字段后添加fonticon？

3 个答案: