如何放置复选框标签

时间:2018-12-10 11:26:02

标签: jquery html css multi-select bootstrap-multiselect

我正在尝试使用 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>

Fiddle

4 个答案:

答案 0 :(得分:1)

被引导CSS覆盖

只需添加此内容:

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

http://jsfiddle.net/can9key3/

答案 1 :(得分:1)

  

我正在尝试使用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>

答案 2 :(得分: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>

答案 3 :(得分:-1)

添加Margin标签

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

http://jsfiddle.net/mkgjc8ub/