html - 如何解决这个 HTML/CSS 错误？

Question

这是一个相当复杂的页面，其中的逻辑和标签看起来像这样（请不要担心脚本，它只是用于测试：

<div id="avd" <%if(request.getParameter("s")==null || !request.getParameter("s").equals("avd")) { %>style="display: none;"<%} %>>
    <div class="fr10 smallg">
        F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod
    </div>
    <div class="fl10"></div>
    <div class="fl20">Avdelad fr&aring;n:</div>
    <div class="fl20">
        <input type="text" id="avd_date" value="<%=ansokanInfo.getAvdf()%>" name="<%=PandoraFieldConstants.FIELD_AVDF%>"><input type="button" value="S&ouml;k" onClick="getElementById('popupA').style.display=''">
    </div>
    <div class="clear"></div>
    <div class="fl10"></div>
    <div class="fl20">Datum ingivningsdag:</div>
    <div class="fl20">
        <input type="text" id="avd_ing" value="<%=ansokanInfo.getAvdIngivningsdag()%>" name="<%=PandoraFieldConstants.FIELD_AVD_INGIVNINGSDAG%>" value="<%=ansokanInfo.getIngivningsDatum()%>">&nbsp;<a href="#"><img src="images/cal.gif" alt="" width="16" height="15" border="0" onclick="javascript:openCalWin('620','300','<%=PandoraFieldConstants.FIELD_AVD_INGIVNINGSDAG%>')">
        </a>
    </div>
</div>

显示看起来像这样：

预期的外观是这样的：

怎么了？

*  {font-family:arial;}

.avnamn{ 
    color: #90002b; 
    font-size: 140%; 
    display: inline; 
    vertical-align: 3%; 
    margin-left: 1%;
}

.b{border:1px solid #000;}

.readonly{background-color: #CCC;}

.Webdings{
    font-family: Webdings;
    }

ul{margin-top: 0px}

.mt3{margin-top:-3px;}
.mt5p{margin-top:5px;}

.fontS80 {font-size: 80%;} 
a:link{color:#000; text-decoration:none; }
a:visited{color:#000; text-decoration:none; }
a:hover{color:#000; text-decoration:none; }
a:active{color:#000; text-decoration:none; }

.fontS75 {font-size: 75%;} 

.link{color: #003366;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;}

.link_sm{color: #003366;
    text-decoration: underline;
    cursor: pointer;}

.link_sm{font-size: 70%;cursor: pointer;}

.small{font-size: 75%;}

.smallg{font-size: 75%;
color: #555;}

.ssmall{
    font-size: 65%;
    font-weight: bold;
    color: #555;
}

.small60{font-size: 60%;}
.small50{
    font-size: 50%;
    color: #333;
}

.smallb{font-size: 85%;}

table{display:inline;}

h1{font-size: 130%;display:inline;}
h2{font-size: 100%;display:inline;}
h3{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}

h4{font-size: 70%;display:inline;}

h5{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}

.hthin{
    font-size: 125%;
}

.th {text-align: left;}

td, th{font-size: 75%;
    vertical-align: text-top;}
.td_link{cursor: pointer;}
.td40{height:40px;}
.td60{height:60px;}

.thkant{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 70%;
    text-align: left;
}

.bb{border-bottom: 1px solid #000;}
.bbV{border-bottom: 1px solid #FFF;}
.TB_nbA {background-color:#CCC;}
.TB_bt, .TB_nb, .TB_db, .TB_bb {background-color:#efefdc;}

.hk {background-color:#d9ddb3;}

.hknot {background-color:#f9faf2;}
/*<!--F8F8F1-->*/
.TB_bt{border-top: 1px solid #FFF;}
.TB_bt5{border-top: 5px solid #FFF;}
.TB_bb{border-bottom: 1px solid #999;}
.TB_bb2{border-bottom: 2px solid #c1c1b3;}
.TB_db{border-bottom: 1px solid #000; border-top: 1px solid #000;}
.TB_tb{border-top: 2px solid #efefdc;}

.TB_bo{border: 2px solid #efefdc;}
.TB_bo_hk{border-top: 1px solid #efefdc;}


.TB_bo2{border: 1px solid #efefdc;}

.TB_bo2B{
border-top: 2px solid #c1c1b3;
border-left: 3px solid #efefdc;
border-right: 3px solid #efefdc;
border-bottom: 2px solid #c1c1b3;
}

.TD_bo{
    border-right: 1px solid #c1c1b3;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.TD_bo2{

    border-right: 0;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.ytb{
    border-left:3px solid #efefdc;
    border-right:3px solid #efefdc;
}

.datum {
    font-size: 70%;
    padding-right: 5px;
    vertical-align: text-top;} 

.sub {background:#EAEAEA;}

.sub_meny, .sub_meny_r, .sub_meny_active, .sub_meny_sm{
    font-size: 70%;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: text-top;}

.sub_meny_sm {
    font-size: 60%;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}    

.sub_meny_search{
    position: absolute;
    right: 265px;
    font-size: 70%;
    vertical-align: text-top;
}

.sub_meny_r{
    float:right;
    font-size: 70%;
    padding-left: 8px;
    padding-right: 8px;}

.sub_meny_rm{margin-top:4px;}
.sub_meny_active{font-weight: bold;}

.flikkant1 {
    background-image: url(../images/fl1k.jpg);
    background-position: center;
    z-index: -1;}

.inl_namn{
    font-weight: bold;
    font-size: 70%;
    color: Black;
    text-decoration: none;}

.th{text-align: left;}
.tr{text-align: right;}

.g1{
    background-color: #FFF;
    line-height: 20px;
}

.g2{
    background-color: #EEE;
    line-height: 20px;
}

.g3{
    background-color: #DCDCDC;
    line-height: 20px;
    font-weight: bold;
    font-size: 100%;
}
.g4{
    background-color: #CCC;
    line-height: 20px;
}

.popuphandlaggare{ 
    border-color: #000;
    border-style: groove;      
    border-width: 2px;      
    padding: 0px;      
    background-color: #FFF;     
    font-size: 70%;     
    position: absolute;     
    top: 900px; 
    }

.popupN{
    background-color: #F0F0E3;
    color: #000;
    width: 100%;
    display: inline;
    font-weight: bold;
    height: auto;
    padding: 2px;
    border-bottom: 1px solid #000;
}
.pin{padding: 6px;}

.fl10, .fl20, .fl30, .fl40, .fl50, .fl60, .fl70, .fl80, .fl90, .fl100 {
    padding-bottom:4px;color: #000000;
}

.over{
    background-color: #EFEFDC;
    line-height: 20px;
}

.half{
    line-height:50%;
}

.quarter{
    line-height:25%;
}

.lh10{
    line-height:10%;
}

.checkmargin {margin-right: 25px;}    
.checkmarginL {margin-left: 25px;}    

.pusher {padding-left: 15px;}
.pusherR {margin-right: 40px;}

.rand3{background-color: #FFF; line-height: 3px;}
.rand1{background-color: #FFF; line-height: 1px;}

.whiteborder {     color: #ffffff;      border: 4px solid #ffffff;      padding: 10px;      margin: 10px; }
#details { width: 700px; color: #ffffff; }
.column1 {     color: #000000; margin: 0;      padding: 0;     width: 600px;     border:0;     float: left; }
.column2 {     color: #000000;margin: 0;      padding: 0;     border:0;     width: 80px;     float: right; }

.f200 {
    color: #000000;
}

.f210 {
    color: #000000;float: left;
}
.f220 {
    width: 400px;
}
.f1450 {
    width: 600px;
    float:left;
}
.f1550 {
    width: 150px;
    float:left;
    padding:15px;
}
.paddedcell {
    padding:15px;
}
.b2{border:2px solid #efefdc;}
.inp_sel{width: 80%;}

.fl21{float:left; padding:5px; margin:5px; width:150px;} .fl455{float:left; padding:5px; margin:5px; width:120px;} 

.form-bg {
  background: #eeefdf;
  width:1000px;
  overflow:hidden;
}
.form-bg2 {
  background: #eeefdf;
  width:100%;
  overflow:hidden;
}
.data-bar {
  border-bottom:1px solid #fbfbf7;
  display:inline-block;
  padding:10px 10px;
}

.left {
float:left;
width:200px;

}
.discount {
float:right;
width:500px;

}
.discounts {
width:900px;

}
.right {
float:right;
width:700px;
}
.yta20 {
background: #eeefdf;
width:1100px;
}

.yta2 {

width:1100px;
}

.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
#table td { 
margin:120px; 
} 

#personName {     float:left;     width:300px;   }  #otherDetails {     float:right;     width:450px;      }

.th_rad_sort {border-bottom: 2px solid #000000; text-decoration: none;}

a img { border: 0; outline:0;}

.f { float: right;     color: white; }

.handlaggare { width: 1000px; }

div.data-box-nat{
    margin-bottom: 10px;
    padding: 2px;
    border: 2px solid gray;
    width: 600px;
}
div.data-box-pct{
    margin-bottom: 10px;
    border: 2px solid gray;
    width: 600px;
}

.popup{
    border-color: #000; 
    border-style: groove; 
    border-width: 2px; 
    padding: 0px; 
    background-color: #FFF;
    font-size: 75%;
}

.horizontal-gradient {
    background: #1a2adb; /* Old browsers */
    background: -moz-linear-gradient(left,  #1a2adb 0%, #a1e6ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1a2adb), color-stop(100%,#a1e6ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* IE10+ */
    background: linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a2adb', endColorstr='#a1e6ed',GradientType=1 ); /* IE6-9 */
    color: white;
    width: 1055px;
}

#topBar {width:100%; background-color:#EFEFDC; display:inline-block;}
#topBar h2 {float:left}
#close {position:relative; float:right;}
.fl1, .fl2, .fl5, .fl10, .fl15, .fl20, .fl22, .fl25, .fl30, .fl35, .fl40, .fl45, .fl50, .fl55, .fl60, .fl65, .fl70, .fl75, .fl80, .fl85, .fl90, .fl95, .fl100 { float: left;}
.fl1        {width: 1%;}
.fl2        {width: 2%;}
.fl5        {width: 5%;}
.fl10       {width: 10%;}
.fl13       {width: 13%;}
.fl15       {width: 15%;}
.fl20       {width: 20%;}
.fl21       {width: 21%;}
.fl22       {width: 22%;}
.fl23       {width: 23%;}
.fl24       {width: 23%;}
.fl25       {width: 25%;}
.fl30       {width: 30%;}
.fl35       {width: 35%;}
.fl40       {width: 40%;}
.fl45       {width: 45%;}
.fl50       {width: 50%;}
.fl55       {width: 55%;}
.fl60       {width: 60%;}
.fl65       {width: 65%;}
.fl70       {width: 70%;}
.fl75       {width: 75%;}
.fl80       {width: 80%;}
.fl85       {width: 85%;}
.fl90       {width: 90%;}
.fl95       {width: 95%;}
.fl100      {width: 100%;}

.fr1, .fr5, .fr10, .fr15, .fr20, .fr25, .fr30, .fr35, .fr40, .fr45, .fr50, .fr55, .fr60, .fr65, .fr70, .fr75, .fr80, .fr85, .fr90, .fr95, .fr100 {
    float: right;
    }
.fr1        {width: 1%;}    
.fr5        {width: 5%;}
.fr10       {width: 10%;}
.fr15       {width: 15%;}
.fr20       {width: 20%;}
.fr25       {width: 25%;}
.fr30       {width: 30%;}
.fr35       {width: 35%;}
.fr40       {width: 40%;}
.fr45       {width: 45%;}
.fr50       {width: 50%;}
.fr55       {width: 55%;}
.fr60       {width: 60%;}
.fr65       {width: 65%;}
.fr70       {width: 70%;}
.fr75       {width: 75%;}
.fr80       {width: 80%;}
.fr85       {width: 85%;}
.fr90       {width: 90%;}
.fr95       {width: 95%;}
.fr100      {width: 100%;}

.clearL     {clear: left;}
.clearR     {clear: right;}
.clear      {clear: both;}

Answer 1

看起来您需要在这些行之前清除浮动：

<div class="fl10"></div>
<div class="fl20">Avdelad fr&aring;n:</div>

就像你在这里做的那样添加<div class="clear"></div>：

<div class="clear"></div>
<div class="fl10"></div>
<div class="fl20">Datum ingivningsdag:</div>

或者更好的是，将.clearL类添加到 first div，如下所示：

<div class="fl10 clearL"></div>
<div class="fl20">Avdelad fr&aring;n:</div>

Answer 2

这不是答案，而是建议：

如果您要使用行而不是混淆清除，那么您将更容易控制和维护您的代码，而且在回读 html 时使用语义标记总是有帮助的：

<div class="field-row">
  <label for="my_field">
    My Field Label
  </label>
  <div class="field-wrapper">
    <input id="my_field" name="my_field" type="text" />
  </div>
</div>
<div class="field-row">
  <!-- You can continue each field in another row //-->
</div>

通过使用 HTML 的父子属性，您可以通过定位和布局获得额外的好处 - 即您可以使用填充或边距移动整行，或者您可以再次将整行浮动到另一个元素周围。

然后要“清除”每一行以使它们正确放置，您需要做的就是以下几点：

.field-row {
  overflow: hidden;
  /* 
     overflow hidden is easier to work with than `clear:both` 
     mainly because you can set it on the parent and it is the
     parent that gets corrected. clearing tends to affect the
     surrounding elements, which makes it tricky to follow.
  */
}

.field-row label {
  display: block;
  float: left;
}

.field-wrapper label {
  float: left;
}