如何定位复选框标签

loading...


0

我试图使用margin-top将我的复选框标签定位到某个位置:15px;但出于某种原因,它只适用于复选框而非标签,但同时也适用于边距: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

loading...

4回答

  • 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>
    

  • -1

    添加 Margin 标签

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

    http://jsfiddle.net/mkgjc8ub/


  • 1

    而是使用 margin-top: 15px; only.multiselect-container label input

    你必须使用 margin-bottom/top to all row 什么是 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>
    

  • 1

    它被bootstrap css覆盖

    只需添加:

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

    http://jsfiddle.net/can9key3/

评论

暂时没有评论!