Question

我有一个带有“标准表”类的表。当我将输入框，选择或textareas与另一个元素组合到一个单元格中时，它们会出现在两条不同的行上，即使没有任何元素存在。

这是班级的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”以及所有其他内容，但没有任何内容放置复选框，文本，然后输入框同一行。

Answer 1

尝试;

float: left;

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

table-layout: fixed;

Answer 2

您可以使用vertical-align

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

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

display：inline不会使元素出现在一行上

2 个答案: