如何对齐表格单元格 (<td>) 中的元素？答案

【问题标题】：How can I align the elements in a table cell (<td>)?如何对齐表格单元格 (<td>) 中的元素？
【发布时间】：2017-05-17 04:48:58
【问题描述】：

在尝试让标签和选择元素对齐到行的右侧时，我试过这个：

<tr>
  <td>
    <input type="radio" id="ucemployee" name="travelertype"/>UC Employee
    <label for="selectcampus">UC Campus:</label>
    <select id="selectcampus" title="Please select a campus" align="right">
        <option value="pleaseselect">Please Select</option>
        <option value="ucsc">UC Santa Cruz</option>
        <option value="ucb">UC Berkeley</option>
        <option value="ucd">UC Davis</option>
        <option value="uci">UC Irvine</option>
        <option value="ucla">UC Los Angeles</option>
        <option value="ucm">UC Merced</option>
        <option value="ucr">UC Riverside</option>
        <option value="ucsd">UC San Diego</option>
        <option value="ucsf">UC San Francisco</option>
        <option value="ucsb">UC Santa Barbara</option>
    </select>
  </td>
<tr>

...但它不起作用。

如果我这样做：

<td align="right">
    <input type="radio" id="ucemployee" name="travelertype"/>UC Employee
    . . .
    <select id="selectcampus" title="Please select a campus">
    . . .

...所有元素都右对齐，包括输入的 radio 元素（正如预期的那样，真的），但我希望“radio”保持与左对齐。

如何在不使用收音机的情况下右对齐标签并进行选择？

我需要在收音机和选择之间放一个“shiv”，还是...???

【问题讨论】：

标签： html css html-table flexbox

【解决方案1】：

这里有两个简单的 CSS 方法，用于仅右对齐 td 中的选定项目。

CSS Flexbox 方法.

#flex-container {
  display: flex;
}

label {
  margin-left: auto;
}


/* nonessential decorative styles */
table { width: 100%; }
td { border: 1px dashed black; background-color: aqua; padding: 5px; }
label { margin-right: 5px; }

<table>
  <tr>
    <td>
      <div id="flex-container"><!-- new wrapper -->
        <input type="radio" id="ucemployee" name="travelertype" />UC Employee
        <label for="selectcampus">UC Campus:</label>
        <select id="selectcampus" title="Please select a campus" align="right">
          <option value="pleaseselect">Please Select</option>
          <option value="ucsc">UC Santa Cruz</option>
          <option value="ucb">UC Berkeley</option>
          <option value="ucd">UC Davis</option>
          <option value="uci">UC Irvine</option>
          <option value="ucla">UC Los Angeles</option>
          <option value="ucm">UC Merced</option>
          <option value="ucr">UC Riverside</option>
          <option value="ucsd">UC San Diego</option>
          <option value="ucsf">UC San Francisco</option>
          <option value="ucsb">UC Santa Barbara</option>
        </select>
      </div>
    </td>
    <tr>
</table>

DEMO

注意事项：

内容被包装在一个 div 中，因此不需要更改 td 的 display 值，这可能会影响表格布局算法。
在此处了解有关 flex auto 边距的更多信息：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

CSS inline-block 方法

#right-align {
  display: inline-block;
  text-align: right;
  width: 95%;
}

/* non-essential decorative styles */
table { width: 100%; }
td { border: 1px dashed black; background-color: aqua; padding: 5px; }

<table>
  <tr>
    <td>
      <input type="radio" id="ucemployee" name="travelertype" />

      <div id="right-align">
        <label for="selectcampus">UC Campus:</label>
        <select id="selectcampus" title="Please select a campus" align="right">
            <option value="pleaseselect">Please Select</option>
            <option value="ucsc">UC Santa Cruz</option>
            <option value="ucb">UC Berkeley</option>
            <option value="ucd">UC Davis</option>
            <option value="uci">UC Irvine</option>
            <option value="ucla">UC Los Angeles</option>
            <option value="ucm">UC Merced</option>
            <option value="ucr">UC Riverside</option>
            <option value="ucsd">UC San Diego</option>
            <option value="ucsf">UC San Francisco</option>
            <option value="ucsb">UC Santa Barbara</option>
        </select>
      </div>
    </td>
  </tr>
</table>

DEMO

【讨论】：

【解决方案2】：

不明白您要说的实际安排，但我希望这会有所帮助。使用 css 和标签重新排列。

<style>
td{
    float:right;
}
select,label[for=selectcampus],label[for=ucemployee]{
    float:right;
    text-align:left;
}
input[type="radio"]
{
    float:left;
}
</style>
<td>
    <label for="ucemployee">UC Employee</label>
    <input type="radio" id="ucemployee" name="travelertype"/>
    <select id="selectcampus" title="Please select a campus" align="right">
        <option value="pleaseselect">Please Select</option>
        <option value="ucsc">UC Santa Cruz</option>
        <option value="ucb">UC Berkeley</option>
        <option value="ucd">UC Davis</option>
        <option value="uci">UC Irvine</option>
        <option value="ucla">UC Los Angeles</option>
        <option value="ucm">UC Merced</option>
        <option value="ucr">UC Riverside</option>
        <option value="ucsd">UC San Diego</option>
        <option value="ucsf">UC San Francisco</option>
        <option value="ucsb">UC Santa Barbara</option>
    </select>
    <label for="selectcampus">UC Campus:</label>
</td>

【讨论】：

【解决方案3】：

我认为你需要一些 CSS。

#test{
float:right;}

http://jsfiddle.net/m4onhxa9/

【讨论】：