Как разместить метку флажка

Question

Я пытаюсь расположить метку своего флажка в определенную позицию, используя margin-top: 15px; , но по какой-то причине он применяется только к флажку, а не метке, но в то же время margin-right: 20px; применяется к метке.

$(function() {
  $('#lstStates').multiselect({});
});

.multiselect-container label input {
  margin-right: 20px;
  margin-top: 15px;
}

.multiselect-container>li>a {
  padding: 12px;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script type="text/javascript" src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>

<select size="5" name="lstStates" multiple="multiple" id="lstStates">
  <option value="NJ">New Jersey</option>
  <option value="NY">New York</option>
  <option value="OH">Ohio</option>
  <option value="TX">Texas</option>
  <option value="PA">Pennsylvania</option>
  <option value="GG">asdfa</option>
  <option value="AW">jghjh</option>
  <option value="AE">qwer</option>
</select>

Скрипка

Answer 1

Вместо этого используйте margin-top: 15px; только до .multiselect-container label input

Вы должны использовать margin-bottom/top для всей строки , что означает li

$(function() {
  $('#lstStates').multiselect({});
});

.multiselect-container>li{
margin-top:15px;
}
.multiselect-container label input {
  margin-right: 20px;
}
.multiselect-container>li>a {
  padding: 12px;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script type="text/javascript" src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>

<select size="5" name="lstStates" multiple="multiple" id="lstStates">
  <option value="NJ">New Jersey</option>
  <option value="NY">New York</option>
  <option value="OH">Ohio</option>
  <option value="TX">Texas</option>
  <option value="PA">Pennsylvania</option>
  <option value="GG">asdfa</option>
  <option value="AW">jghjh</option>
  <option value="AE">qwer</option>
</select>

Answer 2

Это переопределено при загрузке css

, просто добавьте это:

.multiselect-container>li>a>label.checkbox, 
.multiselect-container>li>a>label.radio {
    margin-top:15px
}

http://jsfiddle.net/can9key3/

Answer 3

Я пытаюсь установить метку своего флажка на определенную позицию с помощью margin-top: 15px;но по какой-то причине он применяется только к флажку, а не к метке

Ваш селектор соответствует только input, он не соответствует label.

в то же время маржа-право: 20px;* применяется к метке.

Нет, это не так.

Помещение поля справа от input перемещает все, что находится справа от этогопрочь.

С правой стороны находится текст внутри ярлыка.Таким образом, этот текст перемещается.

Сама метка не получает правильного поля.

Поскольку ввод находится внутри метки, вам необходимо применить маржу к метке , но поскольку таблица стилей для библиотеки, которую вы используете, явно устанавливает поле для метки, вам нужно использовать более конкретный селектор для его переопределения.

$(function() {
  $('#lstStates').multiselect({});
});

body .multiselect-container>li>a>label.checkbox,
body .multiselect-container>li>a>label.radio {
  margin-top: 15px;
  overflow: auto;
}

.multiselect-container label input {
  margin-right: 20px;
}

.multiselect-container>li>a {
  padding: 12px;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script type="text/javascript" src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>

<select size="5" name="lstStates" multiple="multiple" id="lstStates">
  <option value="NJ">New Jersey</option>
  <option value="NY">New York</option>
  <option value="OH">Ohio</option>
  <option value="TX">Texas</option>
  <option value="PA">Pennsylvania</option>
  <option value="GG">asdfa</option>
  <option value="AW">jghjh</option>
  <option value="AE">qwer</option>
</select>

Answer 4

Добавить Margin ярлык

.multiselect-container label {
  margin-top:15px;
}

http://jsfiddle.net/mkgjc8ub/