Question

我正在尝试将带有图标的div粘贴到具有输入字段的div上的一行中，但是当我将它们放入包装div中时（如stackoverflow中前面的问题所示）并应用一些样式，我的输入字段就会被重叠底部（也在div中的相邻输入字段）。

我尝试了几种不同的位置，尝试在顶部和底部增加一些边距，但没有成功。问题是我已经配置了一些动画，这些动画可以正常运行，并且我不想破坏它们，所以我使用了包装div，但是这破坏了我正在使用的输入字段，并且仪表（它们收缩了）并失去了位置早有描述。

当我不使用包装div时，我希望输入字段像以前一样是另一个。现在输入字段重叠。

.border-label {
  display: block;
  position: relative;
}

.border-label label {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  font-size: 75%;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  top: -0.5em;
  left: 4.65rem;
  z-index: 3;
  line-height: 1;
  padding: 0 1px;
}

.border-label label::after {
  content: " ";
  background: white;
  display: block;
  position: absolute;
  height: 2px;
  top: 50%;
  left: -0.2em;
  right: -0.2em;
  z-index: -1;
}

.border-label .form-control::-webkit-input-placeholder {
  opacity: 1;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.border-label .form-control:-webkit-autofill,
.border-label .form-control:-webkit-autofill:focus,
.border-label .form-control:-webkit-autofill:active,
.border-label .form-control:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.border-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
  opacity: 0;
}

.border-label .form-control:placeholder-shown:not(:focus)+* {
  display: flex;
  align-content: center;
  justify-content: center;
  font-size: 105%;
  opacity: 0.5;
  top: 0.7rem;
}

.cont {
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
}

.left-side {
  display: inline-block;
  float: left;
}

.right-side {
  display: inline-block;
  float: left;
  border: 1px solid #70c5c0;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
  align-content: center;
}

<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>


<div class="modal fade" id="regModal">
  <div class="modal-dialog modal-register">
    <div class="modal-content">
      <h5 class="modal-header text-white py-2 blueheader">
        <strong class="text-center">Sign up</strong>
      </h5>
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <div class="modal-body px-lg-5 pt-0">
        <form class="text-center formcolor" action="{{ path('register') }}" method="post">
          <div class="md-form">
            <div class="form-group border-label">
              <input type="email" class="col-8 offset-2 form-control" id="regEmailInput" name="appbundle_user[email]" placeholder="Type here...">
              <label for="regEmailInput">Your email:</label>
            </div>
            <div class="form-group border-label">
              <input type="text" class="col-8 offset-2 form-control" id="regUserInput" name="appbundle_user[username]" placeholder="Type here...">
              <label for="regUserInput">Your username:</label>
            </div>
            <div class="form-group cont">
              <div class="border-label left-side">
                <input type="password" class="col-8 offset-2 form-control" id="regPassInput" name="appbundle_user[password][first]" placeholder="Type here...">
                <label for="regPassInput">Password first:</label>
                <meter max="5" id="passwordStr"></meter>
                <p id="passwordStrTxt"></p>
              </div>
              <div class="right-side">
                <label for="passShower"><i id="showerIcon" class="fas fa-eye"></i></label>
                <input type="checkbox" id="passShower">
              </div>
            </div>
            <div class="form-group border-label">
              <input type="password" class="col-8 offset-2 form-control" id="regPassSecInput" name="appbundle_user[password][second]" placeholder="Type here...">
              <label for="regPassSecInput">Password second:</label>
            </div>
            <div class="form-group">
              <input type="submit" class="btn btn-primary logBtn" id="formSubmit" value="Sign In">
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

我目前的情况： https://jsfiddle.net/2hnct1ry/

我以前的情况： https://jsfiddle.net/2hnct1ry/1/

P.S。我的输入从左上角获取样式标签，但在小提琴中则是顶部正确（无法添加库，因为我是jsfiddle的新手，对不起。）

输入字段失去位置并被div中的其他输入字段覆盖

0 个答案: