Question

我如何对齐3个输入字段，以使右边缘全部垂直？我仍然希望text + Input位于列的中间，但垂直对齐...

当前使用Bootstrap 3.3.7

HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive col-lg-12 ">
<table class="table table-bordered text-center">
    <thead>
    </thead>
    <tbody>
        <tr>
            <th class="text-center" scope="row">Net. Config</th>
            <td>
                <form class="form-inline">
                    IP Address:
                    <input type="text" class="form-control txbIPsubmit" id="SYST_IPAD" placeholder="0.0.0.0">
                </form>
                <form class="form-inline">
                    NetMask :
                    <input type="text" class="form-control txbIPsubmit" id="SYST_NETM" placeholder="0.0.0.0">
                </form>
                <form class="form-inline">
                    Gateway :
                    <input type="text" class="form-control txbIPsubmit" id="SYST_GWAD" placeholder="0.0.0.0">
                </form>
                <div class="form-control-static">
                    <input type="checkbox" class="form-check-input" id="SYST_DHCP">
                    <label class="form-check-label" for="SYST_DHCP">DHCP</label>
                </div>

                <form class="form-inline">
                    <button type="button" class="btn btn-light" id="btnNetConfig">Apply</button>
                </form>
            </td>
        </tr>
        <tr>
    </tbody>
</table>
</div>

Answer 1

该代码中有很多错误（或者至少是超出标准和良好实践的错误）。

第一：您无需为每个字段都使用一个表单标签，而只需要一个包装整个表格的

第二：不建议将表格用于此类内容。还有许多其他方法可以做到这一点。如flexbox（Basic concepts of flexbox）仅当您要显示的信息是实际表格时才建议使用表格。（行和列中的一组信息）

第三：应该在thead标签内使用th个标签（h用于标题，它们应该是显示该列内容标题的每一列的顶部单元格）< / p>

如果您仍要使用表，则应为该字段的标签输入一个td，为每一行的输入输入一个td，然后可以使用colspan和rowspan使单元格占据一个以上单元格的空间（分别水平或垂直）尝试以下代码：

<table>
    <tr>
        <td rowspan="3">net. config</td>
        <td style="text-align:right;">IP Address</td>
        <td><input type="text" id="SYST_IPAD" placeholder="0.0.0.0"></td>
    </tr>
    <tr>
        <td style="text-align:right;">Netmask</td>
        <td><input type="text" id="SYST_NETM" placeholder="0.0.0.0"></td>
    </tr>
    <tr>
        <td style="text-align:right;">Gateway</td>
        <td><input type="text" id="SYST_GWAD" placeholder="0.0.0.0"></td>
    </tr>
</table>

Answer 2

您可以一口气解决问题并提高可用性/可访问性。我们可以在flexbox上使用form显示器来解决您的对齐问题。我在文本中添加了<label>，并将其设置为flex-grow: 1。这告诉<label>占用最大的水平空间。另一个优点是，它在每个父flex容器中创建了另一个子元素进行操作。

form {
  display: flex;
}

label {
  flex-grow: 1;
  text-align: right;
  padding-right: 10px;
}

<form>
  <label for="t1">String</label><input type="text" id="t1">
</form>

<form>
  <label for="t2">Long string</label><input type="text" id="t2">
</form>

<form>
  <label for="t3">The longest string</label><input type="text" id="t3">
</form>

http://jsfiddle.net/cyhgk9j2/1/

Answer 3

在使用引导程序时，可以使用col-md-4和col-md-8，以便元素垂直对齐。为了使文本+输入位于中间，您可以使用text-align: center;

我在这里做了一个例子。 fiddle

CSS右对齐居中

3 个答案: