html - 输入文本字段与其包含的图标不同

Question

这是我的表单的输入字段:

它运行良好，但显示不正确
这是我的代码:

<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 中的相同代码工作正常。但不在我的页面上
我不知道我哪里出错了。
感谢期待

Answer 1

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