html - 输入越过 div

Question

代码:

.input-wide {
  width: 100%;
  padding: 10px;
  margin: 15px;
  box-sizing: border-box;
}

.container-wide {
  min-height: 80px;
  margin: 20px;
  background-color: #fff;
  border: 1px solid #666;
}

.container-wide>.content {
  padding: 5px;
  color: #444;
  min-height: 40px;
}

<div class="container-wide">
  <div class="content2">
    <form action="http://localhost/projekt2/new-post" class="new-post" method="post" accept-charset="utf-8">
      <input type="text" name="tytul" value="" placeholder="Wpisz tutaj tytuł...." class="input-wide">
      <input type="text" name="opis" value="" placeholder="Wpisz tutaj opis....">
      <input type="date" name="data" value="">
      <select name="status">
    <option value="0">Niepubliczny</option>
    <option value="1" selected="selected">Publiczny</option>
    <option value="2">Zaplanowany</option>
    </select>
    </form>
  </div>
</div>

SS:

我尝试了 box-sizing，正如您在样式中看到的那样，它并没有解决问题。我不知道如何管理这个。我可以将输入 width: 更改为 90% 但这不是我想要的。它具有相同的左右间距(margin)并且完美适合 100% 宽度居中

Answer 1

.input-wide {
    width: 100%;
    padding: 10px;
    margin-bottom:10px; /*change margin to margin-bottom*/
    box-sizing : border-box;
}
.container-wide {
    min-height: 80px;
    margin: 20px;
    background-color: #fff;
    border: 1px solid #666;
    padding: 10px; /*added the padding on div*/
}
.container-wide > .content {
    padding: 5px;
    color: #444;
    min-height: 40px;
}

<div class="container-wide">
        <div class="content2">
            <form action="http://localhost/projekt2/new-post" class="new-post" method="post" accept-charset="utf-8">
<input type="text" name="tytul" value="" placeholder="Wpisz tutaj tytuł...." class="input-wide">
<input type="text" name="opis" value="" placeholder="Wpisz tutaj opis....">
<input type="date" name="data" value="">
<select name="status">
<option value="0">Niepubliczny</option>
<option value="1" selected="selected">Publiczny</option>
<option value="2">Zaplanowany</option>
</select>
        </form></div>
    </div>

检查我的修改。现在可以使用了。