主页 / 问题 / 1064887
Accepted
skatch mast
Asked:2020-12-31 21:00:34 +0000 UTC2020-12-31 21:00:34 +0000 UTC

如何使按钮的输入宽度？

  • 772

输入和 按钮的宽度：100%；那么为什么它们的宽度不同呢？

如何使按钮适合 输入，以便当屏幕宽度发生变化时，按钮将与输入 的大小完全相同？

.form_wapper {
    box-shadow: 0 0 16px 4px #00000047;
    max-width: 243px;
    margin: 0 auto;
    padding: 59px 25px 28px;
}

.form_wapper input {
    width: 100%;
}

.form_wapper button {
    width: 100%;
    border: none;
    margin: 0;
}
<div class="form_wapper">
  <form>
  
    <input type="text">
    <input type="text">
    <input type="text"> 
    <button>button</button>
  
  </form>
</div>

html

2 个回答

  1. Best Answer

    这都是关于框架的border。box-sizing:content-box在内容大小的情况下（在这种情况下，该值是默认设置的）取 100%，并且框架被抛出，这给出了额外的大小。我们修复了暴露box-sizing: border-box;风格input。因此，100% 的尺寸将与框架一起考虑，并且没有任何东西会爬出边界。

    .form_wapper {
    box-shadow: 0 0 16px 4px #00000047;
    max-width: 243px;
    margin: 0 auto;
    padding: 59px 25px 28px;
}

.form_wapper input {
    width: 100%;
    box-sizing: border-box;  // Добавили
}

.form_wapper button {
    width: 100%;
    border: none;
    margin: 0;
}
    <div class="form_wapper">
  <form>
  
    <input type="text">
    <input type="text">
    <input type="text"> 
    <button>button</button>
  
  </form>
</div>

    但我建议使用一种思想上更正确的方式，以免依赖border和不明显的行为100%，做出决定flex-box，实际上就是为了解决此类问题。

    .form_wapper {
  box-shadow: 0 0 16px 4px #00000047;
  max-width: 243px;
  margin: 0 auto;
  padding: 59px 25px 28px;
}

.form_wapper .form {
  display: flex;
  align-items: stretch;
  flex-direction: column;
}

.form_wapper button {
  border: none;
}
    <div class="form_wapper">
  <form class="form">

    <input type="text">
    <input type="text">
    <input type="text">
    <button>button</button>

  </form>
</div>

    • 2

  2. 需要input添加box-sizing: border-box;

    例子

    .form_wapper {
  box-shadow: 0 0 16px 4px #00000047;
  max-width: 243px;
  margin: 0 auto;
  padding: 59px 25px 28px;
  box-sizing: border-box;
}

.form_wapper input {
  width: 100%;
  box-sizing: border-box;
}

.form_wapper button {
  width: 100%;
  border: none;
  margin: 0;
}
    <div class="form_wapper">
  <form>
    <input type="text">
    <input type="text">
    <input type="text">
    <button>button</button>
  </form>
</div>

    • 0

相关问题