Question

我不能让表单输入保留在他的容器内： https://codepen.io/Gillispeare/pen/OzYaxJ

HTML：

<div class="container">
  <div class="box">
    <div class="flipper">
      <div class="front">
        <span>Newsletter</span>
      </div>
      <div class="back">
        <div class="form">
          <form>
            <input type="email" placeholder="insert your email" />
              <a href="#">Submit</a>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

*{
  box-sizing:border-box;
  font-family: 'Sedgwick Ave', cursive;
  color: #a1887f
}
a{
  color:inherit;
  outline:none;
  text-decoration: none;
  cursor:pointer
}
input{
  border-radius: 5px;
  outline-width: 0;
  border: 2px solid #a1887f;
  &:active,&:focus{
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  }
  &::placeholder{
    color:#a1887f;
    font-weight: 700;
    text-indent: 10px;
  }
}
body{
  background:linear-gradient(-135deg, #e0e0e0, #fafafa);
}
.container{
  width:500px;
  border: 15px solid #a1887f;
  border-radius:10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(-135deg, #e0e0e0, #fafafa);

}
.box{ 
  perspective:1000px;
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:40px 40px
}
 .back,.box,.front{
      width:100%;
      height:100%
}

.flipper{
  transition:.6s;
  transform-style:preserve-3d;
}
.back,.front{
      backface-visibility:hidden
      }
 .front{
      transform:rotateY(0);
   padding:40px 40px;
   background: linear-gradient(-135deg, #e0e0e0, #fafafa);;
   border: 15px solid #a1887f;

    }
    .back{
    transform:rotateY(180deg);
    position:absolute;
    bottom:0;
    left:0;

      border: 15px solid #a1887f;


    display:flex;
      justify-content:center;
      align-items:center;
      .form{
        form{
          padding:0 60px !important;
        }
        a{
          position:relative;
          top:5px
        }

      }


          }



    .box:hover .flipper,.box:hover .flipper{
    transform:rotateY(180deg)
  }

我尝试在表单（和他的容器）上设置填充但似乎没有任何效果。如果我设置容器的宽度并输入px，它可以工作，但我更喜欢使用其他一些方法

Answer 1

删除它：

private fun update(id: Long, url: String, email: String) {
        save.execute(FileInfo(id, url, email))
                .observeOn(AndroidSchedulers.mainThread())
                .subscribeOn(Schedulers.io())
                .subscribeBy(
                        onSuccess = {
                            view?.onUpdateSuccess()
                        },
                        onError = {
                            view?.showUpdateError()
                        }
                )
    }

并将.back .form form { padding: 0 60px !important; }和width: 100%添加到您的输入中：

display: block

你身边的input { border-radius: 5px; outline-width: 0; border: 2px solid #a1887f; width: 100%; //Added line display:block //Added line }强迫你显示。

表单输入与其容器重叠

1 个答案: