Question

当我使用div和css在asp.net3.5中设计我的webforms时，在设计中表单看起来没有正确对齐（所有控件分散了evrywer），但是当我查看浏览器时它显示我很好地对齐？这是怎么发生的？将来它会影响到什么？这是表单代码之一

    <div id="SRForm">  
        <h1>Room Reservation</h1>


            <div id="SRLeft">
                <ul>
                            <li>Check Availability</li>
                            <li class="status">Select Room</li>
                            <li>Enter Details </li>
                            <li>Review Reservation & Confirm</li>
                </ul>

            </div>

           <div id="RoomType"> 

            <div id="Room1">
               <div class="imgdetails">
                    <img  class="SRimg" src="images/rooms/regular-room.jpg"/>
               </div>
               <div class="roomdetails">
                    <h3>Regular Room</h3>
                    <asp:Label runat="server" id="lblroom1" class="lblroom">Available:</asp:Label>
                    <asp:Label runat="server" id="lblroom2" class="lblroom">no of rooms</asp:Label>
                    <p class="roompara">Well appointed environment friendly rooms with all the facilities available.</p>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                    <asp:DropDownList ID="cboroom1" class="cboroom" runat="server">
                        <asp:ListItem>1</asp:ListItem>
                        <asp:ListItem>2</asp:ListItem>
                        <asp:ListItem>3</asp:ListItem>
                    </asp:DropDownList>
                </div>
                <div >
                </div>
           </div>

           <div id="Room2">
               <div class="imgdetails">
                    <img  class="SRimg" src="images/rooms/regular-room.jpg"/>
                </div>
                <div class="roomdetails">
                    <h3>Delux Room</h3>
                    <asp:Label ID="lblroom3" runat="server" class="lblroom">Available:</asp:Label>
                    <asp:Label ID="lblroom4" runat="server" class="lblroom">no of rooms</asp:Label>

                    <p class="roompara">Well appointed environment friendly rooms with all the facilities available.</p>
                    <asp:CheckBox ID="CheckBox2" runat="server" />
                    <asp:DropDownList ID="DropDownList2" class="cboroom" runat="server">
                        <asp:ListItem>1</asp:ListItem>
                        <asp:ListItem>2</asp:ListItem>
                        <asp:ListItem>3</asp:ListItem>
                    </asp:DropDownList>

                </div>
                <div class="rate">
                <p class="proom">Charge Per Night:</p>
                <asp:label runat="server" class="lblrate">3000INR</asp:label>
                </div>
           </div>

           <div id="Room3">
               <div class="imgdetails">
                    <img  class="SRimg" src="images/rooms/regular-room.jpg"/>
                </div>
                <div class="roomdetails">
                    <h3>Super-Delux Room</h3>
                    <asp:Label ID="lblroom5" runat="server" class="lblroom">Available:</asp:Label>
                    <asp:Label ID="lblroom6" runat="server" class="lblroom">no of rooms</asp:Label>

                    <p class="roompara">Well appointed environment friendly rooms with all the facilities available.</p>
                    <asp:CheckBox ID="CheckBox3" runat="server" />
                    <asp:DropDownList ID="DropDownList3" class="cboroom" runat="server">
                        <asp:ListItem>1</asp:ListItem>
                        <asp:ListItem>2</asp:ListItem>
                        <asp:ListItem>3</asp:ListItem>
                    </asp:DropDownList>
                </div>
                <div  >
                </div>
           </div>
         </div>     
       </div>


here is css

#SRForm { margin:0; padding:0; width:900px; height:700px;}
#SRForm h1 { text-align:center; font-size:20px; margin: 20px 0; font-weight:bold;}

    #SRLeft      { width:200px; float:left; padding:10px 10px; margin-right:10px; }
    #SRLeft ul   { list-style:none; margin:0; padding:0; height: 160px;}    
    #SRLeft li   {  margin:0; padding:0; list-style:none; float:right;
                        position:relative; padding:5px 5px 5px 5px; font-weight:bold;
                        width:180px;}
    #SRLeft li a { text-align:center; display:block; width:180px; float:right;}

    #RoomType    { width: 650px; float:left; height:700px;
                    }

    #Room1 {float:left; width:630px; margin-bottom:10px; height:230px; border:2px solid #FFF; }
    #Room2 {float:left; width:630px; margin-bottom:10px; height:230px;  border:2px solid #FFF;}

    #Room3 {float:left; width:630px; margin-bottom:10px; height:230px;  border:2px solid #FFF;}


    .roompara{ width:380px;font-size:14px;}
    .imgdetails { width:240px; margin:2px 2px 2px 2px;}
    .roomdetails { width:380px; float:left;}
    .roomdetails h3 { font-weight:bold; text-align:center; width:380px; margin-top:5px;}
    .lblroom        { margin-top:2px; padding:3px;}
    .cboroom        { width:100px;}
    .rate           { width:630px; margin-left:5px; float:left; height:50px;}
    .SRbtn          { float:right; margin-bottom:10px;}
    .proom          { font-weight:bold;}
    .lblrate        { float:left; position:absolute; margin-left:100px;}


/*----images in Rooms---*/
.SRimg { border:4px solid #eee; margin:5px 5px 5px 5px; width:200px; float:left;
    height: 150px;
}

此外，价格与每晚的标签费用不一致.. 请告诉我们错误。

Answer 1

请告诉我们错误。

你的错误是使用asp.net ...这是一个舌头的脸颊回复不要把我击倒。

我假设你使用某种设计视图？除非你从一开始就做到这一点，否则你将遇到一大堆布局问题。我倾向于使用重置样式表，就像在这里找到的那样 - http://meyerweb.com/eric/tools/css/reset/

设计会在浏览器中受到影响吗？

1 个答案: