样式单个 RadioButtonList ListItem答案

【问题标题】：Style individual RadioButtonList ListItem样式单个 RadioButtonList ListItem
【发布时间】：2015-03-04 06:47:24
【问题描述】：

我知道您可以通过在RadioButtonList 上使用CssClass 为生成的table 分配一个类，但我需要能够单独设置生成的<td> 的样式。

使用 JQuery 很容易，但我宁愿不必诉诸于此。

将cssClass="myClass" 添加到ListItem 会导致以下损坏的HTML

<table id="myTable">
    <tbody>
        <tr>
            <td>
                <span cssclass="some_class"> // Well this is rubbish!
                    <input id="myRadioInput" type="radio" name="myRadioInput" value="myValue" >
                    <label for="myRadioInput">myLabel</label>
                </span>
            </td>
            <td>
                <input id="myRadioInput2" type="radio" name="myRadioInput2" value="myValue2">
                <label for="myRadioInput2">myLabel2</label>
            </td>
        </tr>
    </tbody>
</table>

所以我的问题是：实际上是否可以为生成的<td> 的单独分配一个类或应用内联样式？

请注意 这是一个关于 ASP.NET 的问题。简单地告诉我如何设置 HTML 元素样式的答案并没有回答问题。

【问题讨论】：

您想为每个 td 单独设置样式还是为所有 td 设置一个 css 类？
个人，对不起，我会更新问题...
您是在后面的代码中动态创建控件或列表项吗？
不，它只是 .aspx 文件中的直接控件。

标签： asp.net html css radiobuttonlist

【解决方案1】：

如果您想在代码中执行此操作（例如，如果您需要根据复杂的逻辑动态调整样式），您可以在 ListItem 上设置style 属性（设置class 属性也可以，但如果您的 ListItem 已禁用，asp.net 将使用特殊的 aspNetDisabled 类覆盖它）：

item.Attributes["style"] = "color: lightgray; font-style: italic;";

【讨论】：

【解决方案2】：

要设置所有 td 的样式，您可以像这样添加 CSS...

 #myTable td{
        color:Red;
    }

除此之外（如果您希望每个 td 有不同的样式）jQuery 将是向生成的 td 添加类的唯一方法。

$('#myTable td:eq(0)').addClass('td1');
$('#myTable td:eq(1)').addClass('td2');
...

或

$.each($('#myTable td'), function(i){
   $(this).addClass('td'+i);
});

这是我不喜欢 ASP.NET 控件的原因之一，其中包含您无法通过属性面板控制的所有额外标记。

【讨论】：

对不起，我的意思是“单独设置 td 的样式”。我的错。
JQuery 在这种情况下是你的朋友，因为微软讨厌你……我用 jQuery 解决方案更新了我的帖子
是的，我知道如何使用 JQuery。我希望我遗漏了一些明显的东西。
是的，我认为您没有遗漏任何东西……这只是 .NET 控件的本质。这就是为什么我一直远离它们而只使用基本的 HTML 控件，因为这就是 ASP.NET 控件创建的东西
不是我希望的答案，但最终使用了 JQuery，我会将其标记为已回答。

【解决方案3】：

你可以这样做：

<table>
  <tr>
    <td class="yourcssclassname"></td>
    <td class="yourcssclassname2></td>
  </tr>
</table>

<style type="text/css">
  .yourcssclassname
  {
    padding: 10px;
  }
  .yourcssclassname2
  {
    padding: 15px;
  }
</style>

或者你可以

<table>
  <tr>
    <td style="padding:10px;"></td>
    <td style="padding:15px;"></td>
  </tr>
</table>

希望对你有帮助

【讨论】：

我认为他正在使用自动生成表格标记的 ASP.NET RadioButtonList 控件，并且发布者无法控制表格标记。
我需要使用 RadioButtonList (asp.net) 分配类。请重新阅读Q
它可以附加一个数值吗？

【解决方案4】：

您已经非常接近解决方案了。在项目上添加类属性而不是 cssclass 以进行单独的样式化。这将添加一个 span 标记，以正确的类放弃 input 和 label 标记。

<style>
    .radiobuttonlist .red       { display: block; background-color: red; }
</style>    

<asp:RadioButtonList runat="server" CssClass="radiobuttonlist">
    <asp:ListItem Text="Item1" Value="1" ></asp:ListItem>
    <asp:ListItem Text="Item2" Value="2" class="red" ></asp:ListItem>
    <asp:ListItem Text="Item3" Value="3" ></asp:ListItem>
</asp:RadioButtonList>

【讨论】：

@ChrisHawkes 我只是复制粘贴了我编写的代码，它工作正常，正是 OP 所要求的。

【解决方案5】：

您可以使用以下方法定位输入元素和标签：

input[type="radio"] { margin-right:10px; }
input[type="radio"] + label { color:red; }

如果你有一个类在桌子上，你可以添加它更明确。应该向后兼容 IE7。

【讨论】：

他想单独设计它们。