html - 显示 :inline isn't making elements appear on one row

Question

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

这是该类的 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;