Question

我知道您可以使用table上的CssClass为生成的RadioButtonList分配一个类，但我需要能够为生成的<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元素样式的答案没有回答这个问题。

Answer 1

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

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

Answer 2

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

 #myTable td{
        color:Red;
    }

除此之外（如果你想为每个td设置不同的样式）jQuery将是向那些生成的td添加类的唯一方法。

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

OR

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

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

Answer 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>

希望这有帮助

Answer 4

你非常接近解决方案。在单个样式的项目上添加class属性而不是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>

Answer 5

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

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

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

样式单个RadioButtonList ListItem

5 个答案: