Метка выравнивания по левому краю - элемент выбора выравнивания по правому краю (CSS) - PullRequest
Новая
       25

Метка выравнивания по левому краю - элемент выбора выравнивания по правому краю (CSS)

9 голосов
/ 08 декабря 2011

У меня есть макет формы, в котором я хочу, чтобы метка была выровнена по левому краю, а элемент управления формы выровнен по правому краю.Я пытался заставить его работать, используя float: прямо в элементе управления формой (в данном случае a) и затем применяя к нему класс clearfix, но clearfix, похоже, не работает на моем поле выбора.

Здесь что-то не так, или ожидается, что clearfix не будет работать на элементе select?

Однако, когда я это делаю, поле выбора все еще выходит за пределы нижней части содержащего элемента div.

Мой код: 

<style type="text/css">
#category-select {
left: 0px;
top: 0px;
width: 350px;
border: 1px solid #666;
}
select#category {
float: right;
}
select.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
  select.clearfix {
    zoom: 1;  
  }  
</style>
<![endif]-->

<div id="triage">
    <div id="category-select">
          Category: 
          <select class="ipad-dropdown clearfix" id="category" name="category">
                <option value="A">A - Emergency
                <option value="B">B - Urgent
                <option value="C">C - ASAP
                <option value="D" selected>D - Standard
          </select>
    </div>
</div>

Ответы [ 2 ]

6 голосов
/ 08 декабря 2011

Если элемент select самый высокий, почему бы не всплыть на этикетке? Вы также можете воспользоваться возможностью сделать его на самом деле меткой, а не просто текстом в div. Вот CSS: 

#category-select {
    left: 0px;
    top: 0px;
    width: 350px;
    border: 1px solid #666;
    text-align: right;
}
#category-select label {
    float: left;
    margin: 1px;
}

Вот HTML: 

<div id="triage">
    <div id="category-select">
        <label for="category">Category:</label>
        <select class="ipad-dropdown clearfix" id="category" name="category">
            <option value="A">A - Emergency</option>
            <option value="B">B - Urgent</option>
            <option value="C">C - ASAP</option>
            <option value="D" selected>D - Standard</option>
        </select>
    </div>
</div>

Вот демоверсия .

0 голосов
/ 08 декабря 2011

Поскольку вы перемещаете элемент select, он больше не влияет на высоту содержащего элемента div.Попробуйте добавить некоторые отступы к содержащему элементу: http://jsfiddle.net/LZVhN/1/ (также добавлено некоторое относительное позиционирование для выбора)

...