Перемещение якорной метки вниз?

Question

Как перенести метку «удалить» анкера, чтобы она лучше выравнивалась с остальными элементами управления на этой линии?

Ниже мой HTML:

<strong><em>Items with an individual value less than $500 should be scheduled below.</em></strong> 

<div class="dialogSection"> 
    <div style="float:left" class="first"> 
     <label for="unscheduledDescription" style="display:inline-block"> 
      Description of Equipment 
     </label> 
     <input id="unscheduledDescription" type="text" data-bind="value: coverage.unscheduledDescription" class="input input-lg" style="margin: 6px; padding: 5px;" /> 
    </div> 
    <div style="float:left" class="first"> 
     <label for="unscheduledLimit" style="display:inline-block"> 
      Limit 
     </label> 
     <input id="unscheduledLimit" type="text" data-bind="value: coverage.unscheduledLimit" class="input input-number" style="margin: 6px; padding: 5px;" /> 
    </div> 
    <div> 
     <a href="#" data-bind="click: deleteUnscheduledCmd, clickBubble: false"> 
      delete 
     </a> 
    </div> 
</div> 

Спасибо за вашу помощь.

Answer 1

Как я вижу, что <a> обернута с DIV, просто добавьте идентификатор в DIV и применить некоторые стили:

<div id = "del"> 
     <a href="#" data-bind="click: deleteUnscheduledCmd, clickBubble: false"> 
      delete 
     </a> 
</div> 

CSS:

#del{ 
    padding-top:10px; 
} 

Работа скрипку: http://jsfiddle.net/wgsrrbav/

Дайте мне знать, если я помог :)

Answer 2

.dialogSection > div { 
 
    display: inline-block; 
 
    }

<strong><em>Items with an individual value less than $500 should be scheduled below.</em></strong> 
 

 
<div class="dialogSection"> 
 
    <div class="first"> 
 
     <label for="unscheduledDescription" style="display:inline-block"> 
 
      Description of Equipment 
 
     </label> 
 
     <input id="unscheduledDescription" type="text" data-bind="value: coverage.unscheduledDescription" class="input input-lg" style="margin: 6px; padding: 5px;" /> 
 
    </div> 
 
    <div class="first"> 
 
     <label for="unscheduledLimit" style="display:inline-block"> 
 
      Limit 
 
     </label> 
 
     <input id="unscheduledLimit" type="text" data-bind="value: coverage.unscheduledLimit" class="input input-number" style="margin: 6px; padding: 5px;" /> 
 
    </div> 
 
    <div> 
 
     <a href="#" data-bind="click: deleteUnscheduledCmd, clickBubble: false"> 
 
      delete 
 
     </a> 
 
    </div> 
 
</div>

Простой Добавить Дисплей: встроенный блок; свойство in inline div. Не нужно добавлять float: left свойство к определенному Div.

.dialogSection > div { 
    display: inline-block; 
} 

Answer 3

Определенно ответ Ашиша Mehtha является лучше. Другой вариант, вы можете добавить поплавок: левый и верхний стиль в недостаточной мере в DIV (для маржи-топ стиль вместо 10px вы можете добавить что-то в pecentage как 1%, чтобы сделать его отзывчивым)

<div style="float:left; margin-top:10px;"> <a href="#" data-bind="click: deleteUnscheduledCmd, clickBubble: false"> delete </a> </div>

Jsfiddle