Question

在尝试获取标签并选择元素以对齐行的右侧时，我试过这个：

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

...所有元素都对齐，包括输入无线电元素（正如预期的那样），但我想要＆＃34;无线电＆＃34;保持与左边对齐。

如何正确对齐标签并选择，同时单独放置收音机？

我需要放一个＆＃34; shiv＆＃34;收音机和选择之间，或...... ???

Answer 1

以下两种简单的CSS方法可以对齐{仅限td中的所选项目。

CSS Flexbox方法。

＆＃13;

#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; }

＆＃13;

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

＆＃13;

DEMO

注意：

内容包含在div中，因此display的{{1}}值不需要更改，这可能会影响表格布局算法。
点击此处了解有关flex td页边距的详情：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

CSS auto方法

＆＃13;

inline-block

＆＃13;

#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; }

＆＃13;

DEMO

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

Answer 3

我认为你需要一些CSS。

#test{
float:right;}

http://jsfiddle.net/m4onhxa9/

如何对齐表格单元格中的元素？

3 个答案: