c# - 为什么我的单选按钮列表不再有效？（使用CSS样式化后） - Thinbug

为什么我的单选按钮列表不再有效？（使用CSS样式化后）

时间：2016-09-26 20:17:16

标签： c# html css asp.net radiobuttonlist

我在Visual Studio中使用C＃创建了一个简单的邮资计算器（我知道，我知道，我们必须在类中使用Web表单）。我在造型时使用了一些Bootstrap，在某些时候，我的RadioButtonList停止工作。没有任何单选按钮可以选择。不确定是什么造成的。

    <%@ 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>

1 个答案:

答案 0 :(得分：0)

具有ID boxiediv的div通过它的外观覆盖整个页面，这阻碍了其余的组件。我敢打赌，如果你注释掉那个div，你的单选按钮就会起作用。

我不确定你希望它看起来如何，你可能需要使用z-index将其移动到后面或者可能在高度上玩。

#boxiediv { z-index：-1 }