如何定位复选框标签
How to position checkbox label
我正在尝试使用 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>
添加Margin
标签
.multiselect-container label {
margin-top:15px;
}
它被 bootstrap css
覆盖
只需添加:
.multiselect-container>li>a>label.checkbox,
.multiselect-container>li>a>label.radio {
margin-top:15px
}
I am trying to position my checkbox label to a certain position using margin-top: 15px; but for some reason, it's getting applied only to checkbox not the label
您的选择器只匹配 input
,不匹配 label
。
at the same time margin-right: 20px; is getting applied to the label.
不,不是。
在 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>
而是使用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>
我正在尝试使用 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>
添加Margin
标签
.multiselect-container label {
margin-top:15px;
}
它被 bootstrap css
覆盖只需添加:
.multiselect-container>li>a>label.checkbox,
.multiselect-container>li>a>label.radio {
margin-top:15px
}
I am trying to position my checkbox label to a certain position using margin-top: 15px; but for some reason, it's getting applied only to checkbox not the label
您的选择器只匹配 input
,不匹配 label
。
at the same time margin-right: 20px; is getting applied to the label.
不,不是。
在 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>
而是使用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>