Question

我正在尝试编辑表单文本填充而不更改表单大小（以匹配占位符）。每次更改填充时，都会增加表格的长度。

.form-wrapper {
  display:flex;
  justify-content: center;
  flex-direction: column;
  margin: 1em 6em;
}
form {
  width:100%;
  margin: 1em 0;
}
.email-input input{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: none;
}
.password-input input{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
input {
    width:100%;
    height: 50px;
    border:solid 1px #ccc;
    font-size:18px;
}
input::placeholder {
    color: #ccc;
    font-size:18px;
    padding-left:25px;
}

<form>
  <div className="input-field email-input">
    <input id="email" type="text" className="validate" placeholder="Enter Your Email Adress"/>
  </div>
  <div className="input-field password-input">
    <input id="password" type="text" className="validate" placeholder="Enter Your Password"/>
  </div>
</form>

添加为：

input {
    padding-left: 25px;
}

增加不希望的形式长度。这是我最终要破解才能完成的工作吗？

Answer 1

您可能要使用CCS box-sizing

这将包括边框和元素宽度的填充

* { 
  box-sizing: border-box;
}

请注意*，也可以仅将box-sizing: border-box;添加到所需的元素。

Answer 2

为全局CSS添加* {box-sizing：border-box;}不会增加

外的填充

Answer 3

box-sizing: border-box;的替代方法可能是脚趾减去width的填充，如下所示：

.form-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 1em 6em;
}

form {
  width: 100%;
  margin: 1em 0;
}

.email-input input {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: none;
}

.password-input input {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

input {
  width: calc(100% - 25px);
  height: 50px;
  border: solid 1px #ccc;
  font-size: 18px;
  padding-left: 25px;
}

input::placeholder {
  color: #ccc;
  font-size: 18px;
  padding-left: 25px;
}

<form>
  <div className="input-field email-input">
    <input id="email" type="text" className="validate" placeholder="Enter Your Email Adress" />
  </div>
  <div className="input-field password-input">
    <input id="password" type="text" className="validate" placeholder="Enter Your Password" />
  </div>
</form>

在表格输入中添加填充而不更改表格大小

3 个答案: