javascript - 困难的 css 样式 : button alignment AND changing fieldnames AND dynamic text length

Question

我想要的是每个单选按钮集的字段名是灵活的，例如它可以在 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>

Answer 1

您有多种方法可以做到这一点。这里有两个。

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

.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% 宽度以获得您正在寻找的效果。您还可以仅在第一列设置像素宽度，或者您可以将要放入左列的元素设置为具有右边距，以便它们在单元格中占用更多空间。还有其他方法；这完全取决于您要寻找的效果。

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