防止文字环绕输入

Question

我有一个简单的多选下拉列表，试图在其中使复选框和标签保持彼此内联，而标签文本不环绕复选框。 下面的代码显示了我遇到的问题。 在这个小提琴中，我尝试将复选框包装起来并在各自的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> 

Answer 1

您可以在label元素上添加display: inline-block ，然后限制其宽度，以免缠绕：

.msddl_selectList label {
  display: inline-block;
  max-width: 80%;
  vertical-align: top;
}

 $(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); } .msddl_selectList label { display: inline-block; max-width: 80%; vertical-align: top; } 

 <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> <input type="checkbox" /> <label> 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> 

Answer 2

用标签将输入包裹起来，如下所示：

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

Answer 3

这是一个似乎可以解决问题的小提琴： https : //jsfiddle.net/jessikwa/k7z7sqay/5/

我所做的更改：

在li中，复选框和标签元素包装在它们自己的div和类中：

<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;
}

Answer 4

您可以使元素本身浮动，然后在标签上使用页边距将其与复选框隔开：

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

的jsfiddle