功能正常,但显示不正确
这是我的代码:
<div class="form-group">
<label for="datepicker">Expire Date</label>
<div class="form-group">
<div class="input-group date-select-with-expire-option">
<div class="input-group-prepend">
<span class="input-group-text"> <i
class="far fa-calendar-alt"></i>
</span>
</div>
<input type="text" class="form-control date-input"
name="SelectedDate" placeholder="Select date" />
<div class="input-group-append">
<div class="input-group-text">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input expire-option"
name="DateNeverExpires" id="never-expired"> <label
class="custom-control-label" for="never-expired"> Never
expires </label>
</div>
</div>
</div>
</div>
</div>
</div>
这里是 jsFiddle 中的相同代码工作正常。但不在我的页面上
我不知道我哪里错了。
感谢期待
最佳答案
margin
属性在顶部添加边距,删除它可以解决您的 问题。
input[type=text], select {
width: 100%;
padding: 12px 20px;
/* margin: 8px 0; */ # Remove this
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
查看JsFiddle
关于html - 输入文本字段与其包含的图标不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66329437/