0

嗨我有以下(查看)html代码和css产生了这个结果,我该如何对齐它?

结果

在此处输入图像描述

看法

<div class="divfloatleft" >@Html.DropDownListFor(model => model.tintFactorType , slFactorType, new { @class = "divfloatleft rulestextbox5" })</div>
<div class="divfloatleft" >@Html.TextBoxFor(model => model.decFactorValue, new { @class = "divfloatleft rulestextbox6" })</div>
<div class="divfloatleft" >@Html.TextBoxFor(model => model.decMaxBonus, new { @class = "divfloatleft rulestextbox7" })</div>
<div class="divfloatleft" >@Html.TextBoxFor(model => model.nvarMsg , new { @class = "divfloatleft rulestextbox8" })</div>
<div class="divfloatleft" >@Html.TextBoxFor(model => model.varVCode  , new { @class = "divfloatleft rulestextbox9" })</div>
<div  onclick="removeControl(this);return false;" class="remove removeimg divfloatleft"></div>

css

.rulestextbox5 {
    min-width: 125px !important;  
    width:125px !important;  
    height:30px !important;  
    margin-right:6px;
    top:30px;
}


.rulestextbox6 {
    min-width: 80px !important;  
    width:80px !important;  
    height:20px !important;  
    margin-right:6px;
}


.rulestextbox7 {
    min-width: 89px !important;  
    width:89px !important;  
    height:20px !important;  
    margin-right:6px;
}


.rulestextbox8 {
    min-width: 72px !important;  
    width:72px !important;  
    height:20px !important;  
    margin-right:6px;
}


.rulestextbox9 {
    min-width: 70px !important;  
    width:70px !important;  
    height:20px !important;  
    margin-right:6px;
}

.removeimg { 
     cursor:pointer;
    width: 19px !important;    
    height: 18px !important;  
    background: transparent url("images/basicsetup/remove.png") no-repeat center center !important; 
}
4

3 回答 3

0

将它们全部放在一个 5 列 1 行的表中是个好主意。除非您需要,否则无需为每个组件使用单独的 div。我以一个组件为例,其余的应该以相同的方式完成。

   <table>
       <tr>
         <td>
           @Html.DropDownListFor(model => model.tintFactorType , slFactorType, new { @class = "divfloatleft rulestextbox5" })
         </td>
       </tr>
   </table>

如果您需要使用类或 ID,只需使用 span 标签将其添加到它们,因为您需要使它们消失。

于 2013-09-20T06:19:07.320 回答
0

除了您向我们展示的 CSS 之外,请记住使用开发工具检查可能影响您的组合框和 div 的 CSS。

position: relative;
top: 0px;
于 2013-09-20T06:52:25.787 回答
-1

只需为 .divfloatleft 添加 display:block

CSS:

.divfloatleft {
 display:inline-block;
 float:left;
}
于 2013-09-20T06:21:33.700 回答