表格不在DIV中（在IE 9中有效，但在Chrome或IE11中無效）

Question

我在CSS創建一個基於網格的布局（使用此文章在j4n.co創建二千零十四分之六，所以我不認為 CSS是過時的，但我可能是錯的。）

總體而言，它顯示得很好，但是在嘗試在DIV中放置表單時遇到了問題。 以下是幾段代碼：

HTML ：（取自PHP，但是問題再次出現如下）

<div class="row">
<div class="group">Group Name</div>
<div class="col-1">
    <p class="item">Item Name
        <br>
        <form enctype="multipart/form-data" action="upload.php" method="POST" class="pullup">
            <input type="hidden" name="itemID" value="' . htmlspecialchars($itemID) . '"></input>
            <input type="hidden" name="userIDnum" value="' . htmlspecialchars($userIDnum) . '"></input>
            <input type="hidden" name="groupName" value="' . htmlspecialchars($group_name) . '"></input>
            <input type="hidden" name="itemName" value="' . htmlspecialchars($item_name) . '"></input>
            <input type="file" name="uploadFile"></input>
            <br>Name:
            <input type="text" name="displayName"></input>
            <br>
            <input type="submit" name="submit" value="Submit"></input>
        </form>
        <br>
    </p>
</div>

CSS：

.grid-container {
   width: 100%;
   max-width: 1200px;}

.group {
   background-color: #FFDCDC;
   width: 16.66%;
   padding: 5px 5px 5px 5px;}

/*-- our cleafix hack -- */
.row:before, .row:after {
   content:"";
   display: table;
   clear:both;}

[class*='col-'] {
   float: left;
   min-height: 1px;
   width: 16.66%;
   /*-- our gutter -- */
   padding: 12px;
   background-color: #FFDCDC;}

.col-1 {
   width: 16.66%;}

.outline, .outline * {
   outline: 0px solid #dddddd;}

p.item {
   height: 200px;}

/*-- some extra column content styling --*/
[class*='col-'] > p {
   background-color: #FFC2C2;
   padding: 0;
   margin: 0;
   text-align: center;
   color: white;}

form.pullup {
   outline: 5px solid #000000;
   display: table-cell;}

JSFiddle顯示我的問題。 我希望深色輪廓的表格位於較深的紅色框中。

從“可能已經有了答案的問題”中 ：
該 OP沒有跟進他/她的問題。 我試圖從解決這個和這個沒有成功的問題。

從“ 類似問題”中 ，我看不到任何相關的內容。 如果有一個我可能遺漏的問題，請給我指出！

謝謝！

Answer 1

我認為您的問題是<input type="file" name="uploadFile"></input>

它較大以適合較小的容器。 因此，表單的尺寸很大。

編輯：

默認文件輸入很難設置樣式。 使用統一之類的方法來創建適合該框的文件輸入。

ps：item應該是div而不是p-Tag

編輯2：更新了小提琴並添加了：

input[type="file"] {
  max-width: 110px;
}

如果您不需要上載按鈕旁邊的文本，則可以正常工作。 否則要穿制服。

Answer 2

問題在於p標簽內不允許使用表單標簽，因為p標簽不應包含任何塊元素。 簡單的解決方案是將.item標記更改為div並更新CSS。

看看這把小提琴的叉子 。

<div class="row">
<div class="group">Group Name</div>
<div class="col-1">
    <div class="item">Item Name
        <br>
        <form enctype="multipart/form-data" action="upload.php" method="POST" class="pullup">
            <input type="hidden" name="itemID" value="' . htmlspecialchars($itemID) . '"></input>
            <input type="hidden" name="userIDnum" value="' . htmlspecialchars($userIDnum) . '"></input>
            <input type="hidden" name="groupName" value="' . htmlspecialchars($group_name) . '"></input>
            <input type="hidden" name="itemName" value="' . htmlspecialchars($item_name) . '"></input>
            <input type="file" name="uploadFile"></input>
            <br>Name:
            <input type="text" name="displayName"></input>
            <br>
            <input type="submit" name="submit" value="Submit"></input>
        </form>
        <br>
    </div>
</div>
</div>