CSS - 输入框和按钮宽度相同

Question

我制作了一个简单的示例来说明我的问题，链接在这里（https://codepen.io/pprunesquallor/pen/wXqgJd）。

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

非常感谢您的帮助！

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>

- P. Prunesquallor

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>

- Paulie_D

Answer 2

只需在CSS中添加*{box-sizing:border-box;}

*{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>

- Gautam Naik

Answer 3

在`.form-control`类中添加`box-sizing: border-box;`的CSS属性

- Hiren Davda