Question

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

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

enter image description here

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

My current code

我的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 }

查看来源HTML代码

<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

就个人而言，我会为每个列创建类，为每个列创建宽度并将显示类型设置为inline-block。然后将您的列分开并将其类设置为您刚刚创建的“列”类。

Answer 2

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

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

.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元素上设置明确的高度来解决这个问题。如果你有屏幕空间，也可以在那里插入一个不间断的空间（＆amp; nbsp;）来平衡字体的高度。您还可以将高度设置为1em以匹配使用中的字体高度。

你也可以使用一个表 - 这是完全排列行和列的唯一方法，而不指定宽度和高度。表还有其他问题，例如屏幕阅读器等内容消费者感到困惑，所以由您决定：

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

修改

在回复你的评论时，我不确定你到底在想什么，所以这里有一些一般信息。

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

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

困难的CSS样式：按钮对齐和更改字段名称和动态文本长度

2 个答案: