代码之家 › 专栏 › 技术社区 › 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 班

推荐文章

summerrain · “auto”是HTML属性“height”和“width”的有效值吗?

6 月前

Hiyanneri · CSS-如何使用CSS增加下拉列表的宽度?

1 年前

Joshua Fermin · 内联样式反应元素宽度

7 年前

aaaaa · 减少多重条形图R中的条形宽度

7 年前

user7937949 · 无自动的CSS宽度转换

7 年前

shioko · 为什么x%在Visual Studio中不是属性“width”的有效值?

7 年前

James Pointer · 锚标签未填充高度和宽度

7 年前

Tom O'Sullivan · 如何确定屏幕高度和宽度

7 年前

MrO · 如何使div的宽度与屏幕高度相同?

7 年前

user176105 · 调整大小时保持Jquery给定的宽度

7 年前