0

我想要的是每个单选按钮集的字段名称是灵活的，例如，它的范围可以从 10-30 个字符，但第一行和第二行的单选按钮位置必须对齐，如下所示。此外，单选按钮名称可能会更改，因此尽管单选按钮名称发生更改，但有没有办法保持对齐。似乎德语的最大值是 4 个字符（'Nein'）和 2 个字符（'Ja'）以及英语的不同数字。

那么IE中是否有一种通用的方法来保持第一行和第二行之间的单选按钮对齐，并且还对齐字段名称？一个很好的例子如下：

在此处输入图像描述

我对我的 css 样式表所做的是尝试上述样式，但我在每个字段名称前面作为固定长度空格的缩进导致单选按钮未对齐。以下是我当前的代码结果：

我当前的代码

我的CSS代码

.sRRBA { font-family:Arial;color:#000000;font-size:9pt; margin-left:190px }
.sRRBJ { font-family:Arial;color:#000000;font-size:9pt; margin-left:190px }
.sRRCI { font-family:Arial;color:#000000;font-size:9pt; margin-left:190px }
.sRRDH { font-family:Arial;color:#000000;font-size:9pt; margin-left:190px }

查看源代码

<span class="sRRBA">Customer Marketing Permission Postal Address</span>



               <input type="radio" name="" value="N" />
               <span class="readonlytext">No</span>

               <input type="radio" name="" value="Y" />
               <span class="readonlytext">Yes</span>

         <span class="sRRBJ">Customer Marketing Permission Telephone</span>



               <input type="radio" name="" value="N" />
               <span class="readonlytext">No</span>

               <input type="radio" name="" value="Y" />
               <span class="readonlytext">Yes</span>

         <span class="sRRCI">Customer Marketing Permission Mobile Phone</span>



               <input type="radio" name="" value="N" />
               <span class="readonlytext">No</span>

               <input type="radio" name="" value="Y" />
               <span class="readonlytext">Yes</span>

         <span class="sRRDH">Customer Marketing Permission Email</span>



               <input type="radio" name="" value="N" />
               <span class="readonlytext">No</span>

               <input type="radio" name="" value="Y" />
               <span class="readonlytext">Yes</span>


      </div>
4

2 回答 2

0

就我个人而言，我会为每一列创建类，为每一列提供一个宽度并将显示类型设置为内联块。然后划分你的列并将它们的类设置为你刚刚创建的“列”类。

于 2012-09-07T15:17:36.387 回答
0

你有几种方法可以做到这一点。这里有两个。

您可以将每列放入自己的标签中，每列将向左浮动并设置为显示内联块。然后每一列都会排成一行。例如：

.topcontainer {
    display: inline-block;
    overflow: hidden;
}
.ecolumn {
    float: left;
    margin-right: 6px;
 }

<div class="topcontainer">
    <div class="ecolumn">
        <div>Line1</div>
        <div>Line2</div>
    </div>
    <div class="ecolumn">
        <div><input...></div>
        <div><input...></div>
    </div>
</div>

这种方法的问题是，如果线条的高度不同，它就不会垂直排列。您可以通过在 div 元素上设置显式高度来解决此问题。如果您有屏幕空间，也可以在其中插入一个不间断的空格 ( ) 以使高度与字体保持一致。您还可以将高度设置为 1em 以匹配正在使用的字体高度。

您也可以使用表格——这确实是在不指定宽度和高度的情况下完美排列行和列的唯一方法。表格还有其他问题，例如让屏幕阅读器等内容消费者感到困惑，所以这取决于您：

<table>
    <tbody>
        <tr>
            <td>Line1</td>
            <td><input...></td>
        </tr>
        <tr>
            <td>Line2</td>
            <td><input...></td>
        </tr>
    </tbody>
</table>

编辑：

作为对您的评论的回应，我不确定您到底在寻找什么，所以这里有一些一般信息。

除非您以某种方式设置它们的宽度，否则 HTML 表格总是占用它们所需的最小空间。您可以设置表格宽度并将左列设置为 100% 宽度以获得您正在寻找的效果。您还可以仅在第一列上设置像素宽度，或者您可以将放入左列的项目设置为具有右边距，以便它们在单元格中占用更多空间。还有其他方法；这完全取决于您正在寻找什么效果。

此外，您可以在表格中的每个单元格上设置样式，以使内容左、右、中、上、下、中对齐。

于 2012-09-07T15:34:41.753 回答