输入超过了div

Question

代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

SS：

我尝试了box-sizing，你可以看到它的风格，并没有解决问题。我不知道如何管理这个。 我可以将输入width:更改为90%，但这不是我想要的。它具有左右相同的空间（margin），完全适合100％宽度居中

Answer 1

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

检查我的修改。现在它的工作。

Answer 2

像这样改变css，

.input-wide{
    margin: 15px px;
    }