单选按钮文本对齐问题

Question

我正在使用asp.net，并且有一个单选按钮列表，我想按照我的要求对齐它们的文本。这是我目前的情况：

(见第一张图片)

我想让它们像这样：

(见第二张图片)

编辑部分：其次，当我点击“来自年龄”单选按钮时，我会显示一个相应的div，如下所示：

(见第三张图片)

并且当我点击回到“All Ages”单选按钮时，我想隐藏该div。但是SelectedIndexChanged在第二次及以后就不起作用了。它只适用于第一次。

aspx代码如下：

<table>
                        <tr>
                            <td>
                                <asp:RadioButtonList ID="rdoAge" runat="server" RepeatDirection="Horizontal" 
                                    onselectedindexchanged="rdoAge_SelectedIndexChanged" AutoPostBack="true" >
                                    <asp:ListItem Text="All Ages" Value="All Ages" Selected="True"></asp:ListItem>
                                    <asp:ListItem Text="Ages From" Value="Ages From"></asp:ListItem>
                                </asp:RadioButtonList>
                            </td>
                            <div id="divAge" runat="server" visible="false">
                                <td>
                                    <asp:TextBox ID="txtAgeFrom" runat="server" CssClass="textEntry2" MaxLength="3" Width="65"></asp:TextBox>
                                </td>
                                <td>
                                    <asp:Label ID="lblTo" runat="server" Text="To"></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtAgeTo" runat="server" CssClass="textEntry2" MaxLength="3" Width="65"></asp:TextBox>
                                </td>
                            </div>
                        </tr>
                    </table>

cs文件的代码：

protected void rdoAge_SelectedIndexChanged(object sender, EventArgs e)
    {
        switch (rdoAge.SelectedValue)
        {
            case "All Ages":
                divAge.Visible = false;
                break;
            case "Ages From":
                divAge.Visible = true;
                break;
        }
    }

我将非常感谢如果有人能够针对这个问题提供一些有用的建议。

提前致谢。

- asma

Answer 1

这是缺失闭合标签的问题。我的某个控件可能没有闭合标签，我重新添加了所有控件，并注意闭合标签。现在它运行正常。

感谢大家的帮助。

- asma

Answer 2

尝试使用CSS样式

<style type="text/css">
 table.radioWithProperWrap input
 {    
      float: left;
 }

 table.radioWithProperWrap label
 {    
      word-wrap: break-word;

 }
</style>
<asp:RadioButtonList runat="server" CssClass="radioWithProperWrap" ....>

- Pranay Rana

---

谢谢您的快速回复，但是这个CSS并没有起作用。输出结果与之前相同。 - asma

请查看我的修改后的问题，如果我忽略了对齐问题，我还有另一个问题。 - asma

Answer 3

 switch (rdoAge.SelectedItem.Text)

在源代码中，像这样定义更新面板：

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

然后在OnSelectedIndexChanged事件中添加UpdatePanel1.Update();

- thevan

---

在onselectedindexchanged事件中添加一行代码： UpdatePanel1.Update(); - thevan

它抛出异常：“仅当将UpdateMode设置为Conditional时，才可以在ID为'upConsumerSummaryReport'的UpdatePanel上调用Update方法。” - asma

仍然是同样的问题... :( - asma

没有错误。当我点击回到“所有年龄段”单选按钮时，与之前完全相同，什么也不会发生。 - asma

您在UpdatePanel标记中没有设置UpdateMode="Conditional"。 请将其设置为： <asp:UpdatePanel ID="upConsumerSummaryReport" runat="server" UpdateMode="Conditional"> - thevan