如何对齐表格单元格（<td>）中的元素？

debugcn 发表于 Dev

克莱·香农（B. Clay Shannon）

在尝试获取标签和选择元素以使其对齐到行的右侧时，我尝试了以下操作：

<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">
    . . .

...所有元素都向右对齐，包括输入单选元素（确实如此），但我希望“收音机”保持向左对齐。

我如何在不打扰收音机的情况下正确对齐标签并进行选择？

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

迈克尔·本杰明（Michael Benjamin）

这是两种简单的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这样display的价值td并不需要改变，这可能会影响表格的布局算法。
auto在此处了解有关弹性边距的更多信息：在CSS Flexbox中，为什么没有“ justify-items”和“ justify-self”属性？

CSSinline-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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。