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

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

  •  0
  • 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 年前
        1
  •  2
  •   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>
        2
  •  0
  •   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>
        3
  •  0
  •   Hiren Davda    7 年前

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