代码之家 › 专栏 › 技术社区 › P. Prunesquallor

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

width flexbox input button css

P. Prunesquallor · 技术社区 · 7 年前

我举了一个简单的例子 here .

我希望按钮的宽度与输入字段的宽度相同。唯一的问题是,在输入字段上有一个左1的填充,因为我不希望占位符直接粘贴到字段的左侧。我想这和解决办法有关,但我被卡住了。

非常感谢您的帮助!

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>

3 回复 | 直到 7 年前

Paulie_D 7 年前

调整 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>

Gautam Naik 7 年前

只要添加 *{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>

Hiren Davda 7 年前

添加 box-sizing: border-box; css属性 .form-control 班

推荐文章

Thinkpad · Excel引用基于字符串的范围

3 年前

DwightD · Python 3中的用户输入和排序列表

7 年前

Hans Daigle · Python交互式控制台使用curses lib getstr()函数不等待用户输入

7 年前

ÐÐ¸ÐºÐ¸ÑÐ° Ð¨Ð¸ÑÐºÐ¸Ð½ · 如何从字符串(Python3)创建函数[已关闭]

7 年前

Wacky Mode-On · Python:3-在找到关键字后将字符串设为变量?

7 年前

P S · 在laravel 5.5中输入不起作用时重定向回

7 年前

Paul · 如何在输入值中包含图像

7 年前

Mose · c++中带有输入函数的Lambda auto给出错误

7 年前

Henri Wurm · 首先将第一个输入保存到文件夹中,然后引用它

7 年前

Andres Concha · 如何使用Vue设置和获取输入组件的值。js?

7 年前