Question

我为我的问题here做了一个简单的例子。

我希望按钮的宽度与输入字段的宽度相同。唯一的问题是，输入区域上有1rem的左侧填充，因为我不希望占位符直接粘在场的左侧。我认为这与解决方案有关，但我被困住了。

非常感谢！

＆＃13;

html {
  font-size: 12px;
}

.login-form {
  display: flex;
  flex-direction: column; 
  align-items: center;
  width: 20rem;
  padding: 1em;
  background-color: #F00;
}

.form-control {
  width: 100%;
  border: 0;
  padding-left: 1rem;
  margin-bottom: 1rem;      
  color: #000;
}

.btn-sub {
  width: 100%;
}

＆＃13;

<div class=container>
  <form class=login-form>
    <input class="form-control" placeholder="Enter your email">
    <button class="btn-sub">Subscribe</button>
  </form>
</div>

＆＃13;

Answer 1

将孩子的box-sizing调整为border-box ...

form.login-form * {
    box-sizing: border-box;
}

html {
  font-size: 12px;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20rem;
  padding: 1em;
  background-color: #F00;
}

.form-control {
  width: 100%;
  border: 0;
  padding-left: 1rem;
  margin-bottom: 1rem;
  color: #000;
}

form.login-form * {
  box-sizing: border-box;
}

.btn-sub {
  width: 100%;
}

<div class=container>
  <form class=login-form>
    <input class="form-control" placeholder="Enter your email">
    <button class="btn-sub">Subscribe</button>
  </form>
</div>

Answer 2

只需将*{box-sizing:border-box;}添加到CSS

即可

*{box-sizing:border-box;}

html {
  font-size: 12px;
}

.login-form {
  display: flex;
  flex-direction: column; 
  align-items: center;
  width: 20rem;
  padding: 1em;
  background-color: #F00;
}

.form-control {
  width: 100%;
  border: 0;
  padding-left: 1rem;
  margin-bottom: 1rem;      
  color: #000;
}

.btn-sub {
  width: 100%;
}

<div class=container>
  <form class=login-form>
    <input class="form-control" placeholder="Enter your email">
    <button class="btn-sub">Subscribe</button>
  </form>
</div>

Answer 3

在box-sizing: border-box;类

中添加.form-control css属性

CSS - 输入字段和按钮宽度相同

3 个答案: