Question

我想制作一个表，该表的每一行都有一个字段，并且还包含一个强制性指示符。当变得越来越小时，在特定的宽度处，会分成另一行。

我的预期行为：宽度与相对变小，直到a不能变小。并且必须始终内联

这是我的代码。它使用引导程序。请帮我。如果您需要更多详细信息，请告诉我。

<td style="white-space:nowrap;" class="form-inline">
    <span id="${grMD.sys_id}_mandatory_span" style="color:red; font-size: large;">*</span>
    <select class="form-control" name="${grMD.sys_id}_type" id="${grMD.sys_id}_type" onchange="updateSendTo(this, '${grMD.sys_id}')" required="true">
    </select>
</td>

Answer 1

如果您将强制性指标本身放在狭窄的栏中，则该指标将永远不会换行。

<td style="white-space:nowrap;" class="form-inline">
    <span id="${grMD.sys_id}_mandatory_span" style="color:red; font-size: large;">*</span>
</td>
<td>
    <select class="form-control" name="${grMD.sys_id}_type" id="${grMD.sys_id}_type" onchange="updateSendTo(this, '${grMD.sys_id}')" required="true">
    </select>
</td>

仅需注意一点，但是，现代html最佳实践保留了将表格用于表格数据，而不是布局。我可能建议您尝试bootstrap grid system并阅读有关css flexbox的信息。

Answer 2

您可以尝试在设置absolute符号的asterisk位置的css下方尝试。

.form-inline.required span {
    padding-right: 15px;
    color:red;
    position: absolute;
}
.form-inline.required .form-control, .checkbox-inline {
    margin-left: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<table>
    <tr>
        <td class="form-inline required">
            <span>*</span>
            <select class="form-control">
                <option>Hello World</option>
            </select>
        </td>
        
        <td class="form-inline required">
            <span>*</span>
            <input type="text" class="form-control" placeholder="Hello Universe" />
        </td>
        
        <td class="form-inline required">
            <span>*</span>
            <label class="checkbox-inline">
                <input type="radio" class="" />
                Hello Planet
            </label>
        </td>
    </tr>
</table>

让我们知道是否有任何问题。希望这对某人有帮助！

当tr的宽度较小时，<select>和<span>标记在<tr>标记内分成两行

2 个答案: