在 <td> 内的输入旁边垂直对齐文本？答案

【问题标题】：Vertically align text next to an input inside <td>?在 <td> 内的输入旁边垂直对齐文本？
【发布时间】：2017-12-14 10:59:23
【问题描述】：

我有一个这样的 HTML：

<fieldset><legend>Callout Report</legend>
<table>
<tr><td>Start Time</td><td>
<input type="text" id="startTimeUI" autocomplete="off" />
</td></tr>

<tr><td>Callout&nbsp;ID</td><td>
<input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
<span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
</td></tr>
</table>
</fieldset>

输出是这样的：

但我想要这样的输出：

当然，我可以在<td> 中放置一个<table> 元素，但我想知道用CSS 来解决这个问题。我也没有设法在输入中应用vertical-align:middle;。

JSFiddle：https://jsfiddle.net/Wernfried/3ph32L7a/8/

页面是动态创建的，如果需要，可以选择使用 jQuery $("#id").width()。

【问题讨论】：

你使用 bootstrap 3/4 吗？
不，我不使用引导程序
你不想使用引导程序？
我认为 bootstrap 仅对单个元素来说是一种过度杀伤力——然后我会选择一个内联表。

标签： html css html-table multiple-columns

【解决方案1】：

您甚至可以更改span to inline-block 的默认display，这会有所不同，并分别对齐input 和span 标签，如下所示，

body { 
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#765452;
	margin:0px; 
	font-size:16px; 
}

fieldset { margin:0.4em 0.5em; }
fieldset legend { font-weight: bold; }
fieldset table { width:auto; border-collapse:collapse; }
fieldset table td { padding:0.4em 0.75em 0.4em 0.5em; border:1px solid ActiveBorder; }
fieldset table th { padding:0.2em 1em; border-style:solid; border-color:ActiveBorder; border-width:1px 1px 2px; } 
#id{
  margin-top:5px;
}
.calloutTitle {
  width:60%;
  display:inline-block;
  vertical-align:top;
  margin-left:10px;
}

<fieldset><legend>Callout Report</legend>
<table>
<tr><td>Start Time</td><td>
<input type="text" id="startTimeUI" autocomplete="off" />
</td></tr>

<tr><td>Callout&nbsp;ID</td><td>
<input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
<span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
</td></tr>
</table>
</fieldset>

更新 -

同样使用display inline-block分别对齐span文本，甚至更改td标签的默认vertical-align。

body {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #765452;
  margin: 0px;
  font-size: 16px;
}

fieldset {
  margin: 0.4em 0.5em;
}

fieldset legend {
  font-weight: bold;
}

fieldset table {
  width: auto;
  border-collapse: collapse;
}

fieldset table td {
  padding: 0.4em 0.75em 0.4em 0.5em;
  border: 1px solid ActiveBorder;
}

fieldset table th {
  padding: 0.2em 1em;
  border-style: solid;
  border-color: ActiveBorder;
  border-width: 1px 1px 2px;
}

table tr:nth-of-type(2) td{
  vertical-align:middle;
}

table tr:nth-of-type(2) td > input{
  width:150px;
}
table tr:nth-of-type(2) td > span{
  width:calc(90% - 150px);
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

<fieldset>
  <legend>Callout Report</legend>
  <table>
    <tr>
      <td>Start Time</td>
      <td>
        <input type="text" id="startTimeUI" autocomplete="off" />
      </td>
    </tr>

    <tr>
      <td>Callout&nbsp;ID</td>
      <td>
        <input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
        <span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
      </td>
    </tr>
  </table>
</fieldset>

【讨论】：

我认为#id{ margin-top:5px;} 是个骗子。如果文本更长（例如 3 行）会发生什么。短 calloutTitle 也失败了。
为了正确对齐输入，我在上面的代码中使用了 margin-top，检查这个 jsFiddle jsfiddle.net/t6f0rwyc 同样使用 display:inline-block。如果您希望所有字段都垂直居中，即使跨度文本范围增加，那么您的表格想法是正确的。
jsfiddle.net/t6f0rwyc/1 的解决方案有效。最好的。如果你把它放在你的答案中，我会接受它。

【解决方案2】：

试试这个：

body {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #765452;
  margin: 0px;
  font-size: 16px;
}
fieldset {
  margin: 0.4em 0.5em;
}
fieldset legend {
  font-weight: bold;
}
fieldset table {
  width: auto;
  border-collapse: collapse;
}
fieldset table td {
  padding: 0.4em 0.75em 0.4em 0.5em;
  border: 1px solid ActiveBorder;
}
fieldset table th {
  padding: 0.2em 1em;
  border-style: solid;
  border-color: ActiveBorder;
  border-width: 1px 1px 2px;
}
.call-out {
  display: flex;
  align-items: center;
}
.calloutTitle {
  margin-left: 1%;
}

<fieldset>
  <legend>Callout Report</legend>
  <table>
    <tr>
      <td>Start Time</td>
      <td>
        <input type="text" id="startTimeUI" autocomplete="off" />
      </td>
    </tr>
    <tr>
      <td class="callout">Callout&nbsp;ID</td>
      <td class="call-out">
        <input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
        <span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
      </td>
    </tr>
  </table>
</fieldset>

【讨论】：

【解决方案3】：

使用 css flex 属性

body { 
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#765452;
  margin:0px; 
  font-size:16px; 
}
fieldset {
  margin: 0.4em 0.5em;
}
fieldset legend {
  font-weight: bold;
}
fieldset table {
  width: auto;
  border-collapse: collapse;
}
fieldset table td {
  padding: 0.4em 0.75em 0.4em 0.5em;
  border: 1px solid ActiveBorder;
}
fieldset table th {
  padding: 0.2em 1em;
  border-style: solid;
  border-color: ActiveBorder;
  border-width: 1px 1px 2px;
}
.calloutTitle {
  margin-left:10px;
}
.custom-class{
  display: flex;
  align-items: center;
}

<fieldset>
  <legend>Callout Report</legend>
  <table>
    <tr>
      <td>Start Time</td>
      <td>
        <input type="text" id="startTimeUI" autocomplete="off" />
      </td>
    </tr>
    <tr>
      <td>Callout&nbsp;ID</td>
      <td class="custom-class">
        <input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
        <span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
      </td>
    </tr>
  </table>
</fieldset>

【讨论】：

似乎有效，但有些边界线是双重的。我添加了border-width: 0px; border-right-width:1px;（如果是最后一行则添加border-bottom-width:1px;）以使其更好。

【解决方案4】：

我们只需要添加以下 CSS 即可使其正常工作，而无需更改现有代码。只需使用 flex 并以相同的方式获得结果。

`fieldset table td {
    padding: 0.4em 0.75em 0.4em 0.5em;
    border: 1px solid ActiveBorder;
    display: flex;
}`

【讨论】：

这也会改变<input>的高度
显示：弹性；对齐项目：居中；希望它有效
是的，现在和 bruce182 的回答一样