主页 / 问题 / 915925
Accepted
Чайник
Asked:2020-12-05 22:55:46 +0000 UTC2020-12-05 22:55:46 +0000 UTC

具有给定填充的输入爬出 div

  • 772

出于某种原因，在分配填充时，文本字段超出了 div 的边界，我做错了什么？

编码：

    input[type="text"]{
      padding: 8px 12px;
      display: block;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 100%;
    }
    
    .auth_form{
      width: 210px;
    }
    <div class="auth_form ">
        <h3>Авторизация</h3>
        <input type="text" class="" placeholder="Электронная почта"/>
        <input type="text" class="" placeholder="Пароль"/>
        <button type="button" >Вход</button>
      </div>

html

1 个回答

  1. Best Answer

    向字段添加属性box-sizing: border-box;。因为这个属性width会包含值border和padding。我还建议阅读有关box-model.

    input[type="text"]{
      padding: 8px 12px;
      display: block;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    
    .auth_form{
      width: 210px;
    }
    <div class="auth_form ">
        <h3>Авторизация</h3>
        <input type="text" class="" placeholder="Электронная почта"/>
        <input type="text" class="" placeholder="Пароль"/>
        <button type="button" >Вход</button>
      </div>

    • 0

相关问题