0

我有一张带有“标准表”类的表。当我将输入框、选择或文本区域与另一个元素组合到一个单元格中时，即使不存在任何
s，它们也会出现在两个单独的行上。

这是该类的CSS：

/* Table
====================================*/
table.standard-table {
    width:100%;
    border-collapse: separate;
    border-spacing: 0;
    border:none;
    margin-bottom: 15px;
    -webkit-box-shadow:  0px 1px 1px 0px rgba(180, 180, 180, 0.1);
    box-shadow:  0px 1px 1px 0px rgba(180, 180, 180, 0.1);
    border:1px solid #cccccc;
}

table.standard-table th {
    border: 1px solid #dddddd;
    border-right: none;
    background-color: #fafafa;
    text-align: left;
    padding: 10px 15px;
    color: #404040;
    vertical-align: top;
    font-size: 14px;
    font-weight: bold;
}

table.standard-table td:last-child {
    border-right: 1px solid #ddd;
}

table.standard-table th:last-child {
    border-right: 1px solid #ddd;
}

table.standard-table td {
    padding: 10px 15px;
    border: #e0e0e0 1px solid;
    border-top: none;
    border-right: none;
}

table.standard-table tr:hover td {background-color: #fafafa;}

table tr.altrow { background-color: #cccccc; }

table th {text-align: left; font-weight:bold; vertical-align:top; }

这是有问题的行的示例：

<tr>
    <th valign='top'>Items in Package</th>
    <td>
    <input type='checkbox' name='categories[]' value='test' /> Test 
        <input type='text' name='budget_1' placeholder='Budget' style='width:200px;' onkeyup=\"if (/[a-z\s,$]/ig.test(this.value)) this.value = this.value.replace(/[a-z\s,$]/ig,'')\" />
    </td>
</tr>

我尝试添加“display:inline”、“display:inline-cell”、“display:inline-table”等所有其他内容，但没有将复选框、文本和输入框放在同一行。

4

2 回答 2

0

您可以使用vertical-align

http://jsfiddle.net/2RL8t/3/

从技术上讲，它已经在中间垂直对齐，但我不认为视觉上看起来不像。

于 2012-08-22T13:46:06.780 回答
0

尝试;

float: left;

这将强制元素内联。除此之外，使用；

table-layout: fixed;
于 2012-08-22T13:26:50.940 回答