Как выровнять выпадающий список и кнопку img?

Question

Как выровнять выпадающий список и кнопку img?

0

Привет, у меня есть следующий (View) 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; 
}

tsohtan 20 сен. 2013, в 09:07

Источник

Теги:

html

css

3 ответа

0

Это хорошая идея, чтобы поместить все их в таблицу с 5 столбцами и 1 строкой. Не нужно использовать отдельный div для каждого компонента, если он вам не нужен. В качестве примера я помещаю один компонент, остальные должны выполняться одинаково.

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

Если вам нужно использовать класс или идентификатор, просто добавьте его к ним с помощью тега span, поскольку вам нужно заставить их исчезнуть.

mpakbaz 20 сен. 2013, в 03:53

0

спасибо за предложение, это из-за динамического добавления вышеупомянутого HTML во время выполнения. а также я попробовал ваш подход, прежде чем не уверен, почему он не показан, поэтому вместо этого я переключаю его на div.
tsohtan 20 сен. 2013, в 06:23

0

Просто добавьте отображение: блок для.divfloatleft

CSS:

.divfloatleft {
 display:inline-block;
 float:left;
}

Jeyarathnem Jeyachanthuru 20 сен. 2013, в 03:32

0

все равно не отличается.
tsohtan 20 сен. 2013, в 06:25

Ещё вопросы

спасибо за предложение, это из-за динамического добавления вышеупомянутого HTML во время выполнения. а также я попробовал ваш подход, прежде чем не уверен, почему он не показан, поэтому вместо этого я переключаю его на div.

porfiriopartida · Accepted Answer · 2013-09-20T05-28-00.000Z

Не забудьте проверить с помощью инструмента dev css, который может влиять на ваш combobox и div, кроме CSS, который вы нам показали.

position: relative;
top: 0px;