为什么我的单选按钮列表不再起作用？（使用 CSS 设置样式后）

Question

我使用 C# 在 Visual Studio 中使用 Web 窗体创建了一个简单的邮资计算器（我知道，我知道，我们必须在 Class 中使用 Web 窗体）。我在设置样式时使用了一些 Bootstrap，在某些时候，我的 RadioButtonList 停止工作。 None 个单选按钮可以被选中。不太确定是什么原因造成的。

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="PostageCalculator._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/bootstrap.min.js"></script>
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />

    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 249px;
            height: 250px;


        }

        #boxiediv {
            text-align: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
 .outer-div
{
     padding: 30px;
     text-align: center;
}
.inner-div
{
     display: inline-block;
     padding: 50px;
}






    </style>
</head>
<body>
    <form id="form1" runat="server" autocomplete="off">
       <div class="page-header"> 
        <div class="container-fluid">



            <div  id="boxiediv" > <img id="boxielogo" alt="Boxie. Easier than it should be." class="auto-style1" src="boxielogo2.png" align="middle"/></div>

             <br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br />

        <div  style="background-color: #4d6684 !important; "  class="jumbotron outer-div" id="jbotron1"  >

        <div id="textboxes" class="row" >

             <div class="col-md-4">

        <asp:TextBox ID="widthTextBox"  value="0" type="number" AutoPostBack="true" runat="server" OnTextChanged="Calculate"></asp:TextBox>
                 <em>&nbsp;width</em></div>

              <div class="col-md-4">
        <asp:TextBox ID="heightTextBox"  value="0" type="number" AutoPostBack="true" runat="server" OnTextChanged="Calculate"></asp:TextBox>
                  <em>&nbsp; height</em>
                </div> 

              <div class="col-md-4">
        <asp:TextBox ID="lengthTextBox"  value="0" type="number" AutoPostBack="true" runat="server" OnTextChanged="Calculate"></asp:TextBox>
                  <em>&nbsp; length (optional)</em></div>
                 <br />

        </div><!--Closing tag for #textboxes-->

            <div id="radiolist" class="inner-div" >

                <asp:RadioButtonList AutoPostBack="true" ID="deliveryRadioList" runat="server" OnSelectedIndexChanged="Calculate"
              RepeatDirection="Horizontal" >

              <asp:ListItem Value="0.15" style="margin-right: 20px">Ground</asp:ListItem> 
            <asp:ListItem Value="0.25" style="margin-right: 20px">Air</asp:ListItem>
              <asp:ListItem Value="0.45" >Next Day</asp:ListItem>

         </asp:RadioButtonList>



                </div><!-- closing tag for #radios-->
        <asp:HiddenField ID="cost" runat="server" Value="0" />
        <asp:Label ID="resultLabel" runat="server"></asp:Label>
        </div>
    </div>
        </div>
    </form>
</body>
</html>

Answer 1

ID 为 boxiediv 的 div 从表面上看覆盖了您的整个页面，这会阻塞您的其余组件。如果您注释掉 div.

，我敢打赌您的单选按钮会起作用

我不确定你想要它的外观，你可能需要使用 z-index 将它移到后面或者可能需要调整高度。

#boxiediv { z 指数：-1 }

为什么我的单选按钮列表不再起作用？（使用 CSS 设置样式后）

Why isn't my radio button list working anymore? (After styling with CSS)

html

css

c#

asp.net

radiobuttonlist

为什么我的单选按钮列表不再起作用？ （使用 CSS 设置样式后）

Why isn't my radio button list working anymore? (After styling with CSS)

html

css

c#

asp.net

radiobuttonlist

为什么我的单选按钮列表不再起作用？（使用 CSS 设置样式后）