Как я могу получить вход флажка на левой стороне <div>?

0

У меня есть следующий код:

<div class="w25">
   <span>True</span>
   <input data-ng-model="answer.correct" 
          type="checkbox">
</div>

Размер div примерно 150 пикселей. Что происходит, так это то, что вход появляется в центре с примерно 70 пикселей на каждой стороне.

Как я могу заставить <input> перейти влево?

  • 0
    Можете ли вы поделиться с нами CSS? Или, если возможно, сделайте JSFIDDLE.
  • 0
    float: left; ?
Теги:

6 ответов

0
Лучший ответ

span и элементы input по умолчанию являются встроенными, а чекбокс будет размещен рядом с элементом span. Я предполагаю, что никакой дополнительный стиль не применяется ни к одному из элементов. Если да, отправьте свой css.

Если вы хотите поместить флажок слева, вы можете:

  • Поверните вокруг диапазона и ввода (сначала вход, затем диапазон)
  • Поплавьте вход влево (style = "float: left;")
  • Использовать явное позиционирование (например, postition: absolute; left: 0;)

Как проиллюстрировано здесь

0

Во-первых, измените позиции ввода и диапазона (если вы это сделаете) и посмотрите, работает ли это:

<div class="w25">
  <input data-ng-model="answer.correct" type="checkbox">
  <span>True</span>
</div>

Если он не работает, попробуйте изменить вход для:

<input data-ng-model="answer.correct" style="float: left" type="checkbox">

Если он не работает, попробуйте:

<div class="w25">
  <div style="width:70px; display: inline;"><span>True</span></div>
  <div style="float:left; width:70px; display: inline;"><input data-ng-model="answer.correct" type="checkbox"></div>
</div>
0
 <input data-ng-model="answer.correct" style="float:left" type="checkbox">
0

Вероятно, вы inherit стили из своего div- class="w25". Но вы можете попробовать:

  • Один изменить порядок:

    <div class="w25">
      <input data-ng-model="answer.correct" type="checkbox">
      <span>True</span>
    </div>
    
  • Два добавьте эти свойства в свой CSS, чтобы убедиться, что каждый элемент имеет правильные свойства:

    .w25 input, .w25 span {
      margin:0;
      padding:0;
      vertical-align:middle;
    }
    

Просмотрите эту демонстрацию http://jsfiddle.net/W7YE7/1/

0

Вы можете добавить стиль CSS float: left; Обычно лучше ставить стиль в отдельный файл CSS, а не в строку, поэтому, если вы можете это сделать, назначьте класс для ввода, например:

<div class="w25">
<span>True</span>
<input class="yourclass" data-ng-model="answer.correct" type="checkbox">
</div>

И в файле css:

.yourclass {float: left;}

Здесь у вас есть JsFiddle: http://jsfiddle.net/A52nS/

-1

попробуйте этот css

.w25{
float:left;
}
  • 0
    вот ты плывешь весь див ...
  • 0
    да, я мог бы попросить CSS и затем попытаться ответить

Ещё вопросы

Сообщество Overcoder
Наверх
Меню