Question

我在CSS中创建了基于网格的布局（2014年6月创建的this使用j4n.co文章，因此我认为 CSS已过时，但我可能错了。）

总的来说，它显示正常，但在尝试在DIV中放置表单时遇到了问题。以下是几段代码：

HTML :(取自PHP内部，但the problem recreates如下）

<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显示我的问题。我希望黑暗的轮廓形式在更暗的红色框内。

来自“可能已经有您答案的问题”：
This OP没有跟进他/她的问题。我尝试了this和this问题的解决方案但没有成功。

从类似问题，我没有看到任何似乎相关的内容。如果有一个问题可能对我错过了，请指点我！

谢谢！

Answer 1

我认为您的问题是<input type="file" name="uploadFile"></input>

大到适合较小的容器。因此，表单的维度很大。

编辑：

默认文件输入很难设置样式。使用uniform之类的内容创建适合框的文件输入。

ps：item应该是div而不是p-Tag

编辑2：更新了fiddle并添加了：

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

如果你不需要上传按钮旁边的文字，工作正常。否则去制服。

Answer 2

问题是p标签内不允许使用表单标签，因为p标签不应包含任何块元素。简单的解决方案是将.item标记更改为div并更新CSS。

查看this fork of your fiddle。

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

表格不属于DIV（在IE 9中工作但不在Chrome或IE11中）

2 个答案: