logo标签列表

防止文本环绕输入框

jqueryhtmlcss
3

我有一个简单的多选下拉列表，我想让复选框和标签保持在同一行，而不是标签文本围绕复选框换行。以下是显示我遇到问题的代码。 在这个 fiddle中，我尝试将复选框和标签分别包装在自己的div中并浮动它们，但这会导致标签断开到下一行。

$(document).ready(function() {
    var el = $(".msddl_selectItem");
    el.find(".msddl_selectListToggle").on("click", function () {
        var container = $(this).parents(".msddl_selectItem");
        var list = container.find("ul");
        if (list.is(":visible")) {
            list.slideUp("fast");
        } else {
            list.slideDown("fast");
        }
    });
});
body {
    background: #eee;
}
/*msddl*/
.msddlGroup 
{
    display: block;
    float: left;
    margin: 0 0 0 1.6%;
    width: 32.26%; 
}
.msddlGroup:first-child {  
    margin-left: 0; 
}
@media only screen and (max-width: 480px) {
    .msddlGroup {  
        margin: -13px 0 0 0; 
        width: 100%; 
    }
    .msddlGroup:first-child { 
        margin-top: 0; 
    }
}
.msddl_selectItem dd {
    margin: 0px;
    padding: 0px;
}
.msddl_selectItem dt {
    cursor: pointer;
}
.msddl_selectItem 
{
    font-family: Arial;
    font-size: 9pt;
    background-color: #fff;
    color: Black !important;
    /*margin-left: 5px !important;*/
    vertical-align: top;
    margin: 0;
    padding-bottom: 1px;
    outline: none;
    border: 1px solid #c0c0c0;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}
.msddl_selectListToggle 
{
    display: block;
}
.selectorCatcher {
    border: 0px; 
    border-image: none; 
    width: 1px; 
    background-color: transparent
}
.msddl_selectListToggleIcon
{
    display: none;
}
.msddl_selectedCount 
{
    display: inline-block;
}
.msddl_selectList ul
{
    border: 0;
    display: none;
    padding: 5px;
    list-style: none;
}
.msddl_selectList li 
{
    padding: 2px 0;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
}
.msddl_selectList li:hover
{
    background-color: rgba(81, 203, 238, 1);
}
.msddl_selectListFlyout .msddl_selectList
{
    position: relative;
}
.msddl_selectListFlyout ul
{
    background-color: #fff;
    margin: 0;
    display: none;
    position: absolute;
    top: 2px;
    min-width: 95%;
    max-height: 200px;
    overflow-y: auto;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msddlGroup">
    <dl class="msddl_selectItem"> 
        <dt>
            <a class="msddl_selectListToggle defaultSelected">
                <input class="selectorCatcher" type="text">
                <span class="msddl_selectedItems"></span>
            </a>
        </dt>
        <dd class="msddl_selectListFlyout">
            <div class="msddl_selectList">
                <ul>
                    <li>
                        <input type="checkbox" />
                        <label>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="checkbox" />
                            Morbi porttitor nulla ut risus ultricies molestie.
                        </label>
                    </li>
                    <li>
                        <input type="checkbox" />
                        <label>
                            Pellentesque eget egestas lorem, quis tincidunt justo
                        </label>                    
                    </li>
                    <li>
                        <input type="checkbox" />
                        <label>
                            Fusce aliquam convallis ligula, et sagittis quam pellentesque ut
                        </label> 
                    </li>
                    <li>
                        <input type="checkbox" />
                        <label>
                            Nullam vel dapibus lacus
                        </label> 
                    </li>
                    <li>
                        <input type="checkbox" />
                        <label>
                            Nulla lectus metus, semper id libero quis, interdum efficitur quam
                        </label> 
                    </li>
                    <li>
                        <input type="checkbox" />
                        <label>
                            Nullam augue purus, aliquam vel odio at, fermentum pellentesque lectus
                        </label> 
                    </li>
                </ul>
            </div>
        </dd>
    </dl>
</div>

4个回答
2
您可以在
好的解决方案，看起来是最简单的。谢谢！ - jessikwa
太棒了，正是我所需要的。请喝我的啤酒。 - djack109
1
将输入内容用类似以下方式的标签进行包装：
 <label>
 <input type="checkbox"/>Nulla lectus metus, semper id libero quis, interdum efficitur quam
 </label>

将此添加到您的CSS中。
label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
}

它会看起来像这样http://jsfiddle.net/DIRTY_SMITH/k7z7sqay/20/

绝对有效。但是 * 前缀有什么作用？ - jessikwa
本来是想注释掉它的，但我现在直接把它删除了。 :) - Adam Buchanan Smith
0
这是一个看起来能解决问题的小把戏：https://jsfiddle.net/jessikwa/k7z7sqay/5/ 我所做的更改：
在li标签中，复选框和标签元素被包裹在它们自己的div和class中：
<li>
  <div class="msddl_checkbox">
    <input type="checkbox" />
  </div>
  <div class="msddl_label">
    <label>
      Nulla lectus metus, semper id libero quis, interdum efficitur quam
    </label>
  </div>
 </li>

然后，在CSS中，我删除了.msddl_selectListFlyout li div的样式，并将以下样式添加到复选框和标签类中：

.msddl_label {
  clear: none;
  padding-left: 25px;
}
.msddl_checkbox {
  float: left;
}
0

您可以对元素本身浮动，然后使用标签的边距将其与复选框分开：

.msddl_selectListFlyout li input {
    float: left;
    display: block;
}
.msddl_selectListFlyout li label {
    display: block;
    margin-left: 25px;
}

JSFIDDLE

程序设计相关。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接