使用CSS在标签左侧的单选按钮

Question

我一直试图在CSS的帮助下将我的radiobuttons的标签移动到左侧，但似乎没有任何效果。我能得到第二双眼睛来帮助我吗？

asp:RadioButtonList ID="rbid" runat="server" RepeatDirection="Vertical" RepeatLayout="Table" TextAlign="left" >
                        <asp:ListItem Value="a">a</asp:ListItem>
                        <asp:ListItem Value="b">b</asp:ListItem>
                        <asp:ListItem Value="c">c</asp:ListItem>
                        <asp:ListItem Value="d">d</asp:ListItem>
                    </asp:RadioButtonList>

的CSS：

    .FormArea input[type=radio]
{
  float:left;     
}

.FormArea input[type=radio] label 
{           
    float:right;

}

Answer 1

你需要TextAlign = TextAlign.Left ，例如：

<script runat="server">  
     protected void Button1_Click(object sender, System.EventArgs e)  
     {  
         RadioButtonList1.TextAlign = TextAlign.Left;  
      }  
     protected void Button2_Click(object sender, System.EventArgs e)  
    {  
         RadioButtonList1.TextAlign = TextAlign.Right;  
     }  
  </script>  

位于页面顶部

查看此link

Answer 2

在您的单选按钮列表中，您已设置TextAlign="Left"，但此内容已被

覆盖

.FormArea input[type=radio] label 
{           
    float:right;
}

毫无疑问，它不起作用。

您有两种选择：

1. 删除两种css样式规则，只需使用单选按钮列表中的TextAlign="Left"或
即可

2. 从单选按钮列表中删除TextAlign="Left"并使用以下CSS：

   .FormArea input[type=radio] { float: right; }
   .FormArea input[type=radio] label { float: left;}
   

两种方法都会根据需要显示单选按钮左侧的文本：



如果答案有帮助，请标记为正确