CSS

Question

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

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

非常感谢帮助！

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 1

将children的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

在 .form-control class

中添加 box-sizing: border-box; css 属性

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

CSS - input field and button to be of same width

input

button

width

flexbox