CSS样式:向左浮动 [英] Css Style : Float Left
本文介绍了CSS样式:向左浮动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨...我的CSS样式有问题.我试图浮动:左标签，它们在设计器中看起来不错，但是当我在IE中查看时，每个标签的左页边距似乎都增加了.这是我的代码:
样式表:
Hi...im having an issue with my css style. I am trying to float:left my labels, they appear fine in the designer, but when i view it in IE, each labels left margin seems to increase. here is my code:
STYLESHEET:
#divMain
{
padding:20px 15px 20px 15px;
background-color:#000;
width:825px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:13px;
color:#000;
}
label
{
float:left;
display:inline;
width: 10em;
margin-right: 1em;
}
em
{
position: absolute;
}
img
{
vertical-align:text-top;
width:7px;
height:7px;
}
table
{
width:825px;
border-collapse:collapse;
border-width:0.25em;
border-color:#666;
border-style:solid;
}
table tr td ol
{
list-style:none;
margin-top:10px;
}
table tr td li
{line-height:25px;
}
h3
{
margin-left:15px;
margin-bottom:0px;
margin-top:0px;
color:#FFF;
}
h2
{
margin-left:15px;
margin-top:30px;
margin-bottom:30px;
color:#fff
;
}
#tdMain
{
background-color:#666;
color:#FFF
}
#trHeading
{
background-color:#f58d41;
}
#trAlt
{
background-color:#F8F8F8;
}
tr
{
background-color:#F8F8F8;
}
HTML:
HTML:
<div id="divMain">
<table id="tblMain">
<tr>
<td id="tdMain" colspan="2"><h2>New Employee Form</h2></td>
</tr>
<tr id="trHeading">
<td colspan="2">
<h3>Basic Details</h3>
</td>
</tr>
<tr>
<td colspan="2">
<ol id="olSingle">
<li><label>Title:</label><asp:DropDownList ID="ddlTitle" runat="server"
Width="257px" AppendDataBoundItems="True">
<asp:ListItem Value="-1">[Select Title]</asp:ListItem>
</asp:DropDownList> <em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>First name:</label><asp:TextBox ID="txtFName" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Middle name:</label><asp:TextBox ID="txtMName" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox></li>
<li><label>Last name:</label><asp:TextBox ID="txtLName" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Date of birth:</label><asp:TextBox ID="txtDOB" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Nationality:</label><asp:DropDownList ID="ddlNationality" runat="server"
Width="257px" AppendDataBoundItems="True">
<asp:ListItem Value="-1">[Select Nationality]</asp:ListItem>
</asp:DropDownList> <em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Marital status:</label><asp:DropDownList ID="ddlMStatus" runat="server"
Width="257px" AppendDataBoundItems="True">
<asp:ListItem Value="-1">[Select Marital Status]</asp:ListItem>
</asp:DropDownList> <em><img src="../../images/required_star.gif" alt="required"/></em></li>
</ol>
</td>
</tr>
<tr id="trHeading">
<td colspan="2">
<h3>Contact Details</h3>
</td>
</tr>
<tr id="trAlt">
<td>
<ol>
<li><label>Address:</label><asp:TextBox ID="txtAddress" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="210px"
Height="76px" TextMode="MultiLine"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Postal code:</label><asp:TextBox ID="txtPostcode" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>City:</label><asp:TextBox ID="txtCity" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px">
</asp:TextBox> <em><img src="../../images/required_star.gif" alt="required"/></em>
</li>
</ol>
</td>
<td>
<ol>
<li><Label>Country:</Label><asp:DropDownList ID="ddlCountry" runat="server"
Width="200px" AppendDataBoundItems="True">
<asp:ListItem Value="-1">[Select Country]</asp:ListItem>
</asp:DropDownList> <em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Work Phone:</label><asp:TextBox ID="txtWorkPh" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox></li>
<li><label>Home Phone:</label><asp:TextBox ID="txtHomePh" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox></li>
<li><label>Mobile:</label><asp:TextBox ID="txtMobile" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><Label>E-mail:</Label><asp:TextBox ID="txtEmail" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
</ol>
</td>
</tr>
<tr id="trHeading"><td colspan="2"><h3>Emergency Contact</h3></td></tr>
<tr><td colspan="2">
<ol>
<li><label>Contact Name:</label><asp:TextBox ID="txtEmContact" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Relationship:</label><asp:TextBox ID="txtEmRelation" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Primary Phone:</label><asp:TextBox ID="txtEmPrimaryPh" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><Label>Alternate Phone:</Label><asp:TextBox ID="txtEmAlternatePh" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox></li>
</ol>
</td>
</tr>
<tr id="trHeading"><td colspan="2"><h3>Job Details</h3></td></tr>
<tr id="trAlt">
<td>
<ol>
<li><label>Job Title:</label><asp:TextBox ID="txtJobTitle" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Job Location:</label><asp:DropDownList ID="ddlLocations" runat="server"
Width="200px" AppendDataBoundItems="True">
<asp:ListItem Value="-1">[Select Location]</asp:ListItem>
</asp:DropDownList> <em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Role:</label><asp:DropDownList ID="ddlRole" runat="server"
Width="200px" AppendDataBoundItems="True">
<asp:ListItem Value="-1">[Select Role]</asp:ListItem>
</asp:DropDownList> <em><img src="../../images/required_star.gif" alt="required"/></em></li>
</ol>
</td>
<td>
<ol>
<li><label>Hiring Date:</label><asp:TextBox ID="txtHireDate" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Termination Date:</label><asp:TextBox ID="txtTerminateDate" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox></li>
<li><label>Total Work Hours:</label><asp:TextBox ID="txtTotalWorkHrs" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
</ol>
</td>
</tr>
<tr id="trHeading"><td colspan="2"><h3>Package Details</h3></td></tr>
<tr>
<td>
<ol>
<li><label>Payment Frequency:</label></li>
<li><label>Wage Rate:</label><asp:TextBox ID="txtWageRate" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Overtime Rate/Hour:</label><asp:TextBox ID="txtOverTime" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Housing Allowance:</label><asp:TextBox ID="txtHousing" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Transport Allowance:</label><asp:TextBox ID="txtTransport" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Air Ticket Allowance:</label><asp:TextBox ID="txtAirTicket" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
</ol>
</td>
<td>
<ol>
<li><label>Commission:</label><asp:TextBox ID="txtCommission" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox></li>
<li><label>Medical:</label><asp:TextBox ID="txtMedical" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox></li>
<li><label>Vehicle:</label><asp:TextBox ID="txtVehicle" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox></li>
<li><label>Vacation Days:</label><asp:TextBox ID="txtVacationDays" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Paid Sick Leaves:</label><asp:TextBox ID="txtSickLeaves" runat="server"
BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
<em><img src="../../images/required_star.gif" alt="required"/></em></li>
<li><label>Employment Visa:</label></li>
</ol>
</td>
</tr>
</table>
</div>推荐答案
I guess the reason is:
I guess the reason is:
margin-right: 1em;
You have defined a right margin. Thus it makes sure it is the defined value and rest all the available space is left on left margin.
Either remove the right margin and check or define the left margin as much you want.
You have defined a right margin. Thus it makes sure it is the defined value and rest all the available space is left on left margin.
Either remove the right margin and check or define the left margin as much you want.
这篇关于CSS样式:向左浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
