防止文本环绕输入

时间：2015-08-07 17:18:12

标签： jquery html css

我有一个简单的多选下拉列表，我试图让复选框和标签保持彼此内联，而没有标签文字环绕复选框。以下是显示我遇到的问题的代码。在this fiddle中，我尝试包装复选框并在每个div中标记并浮动它们，但这会导致标签突破到下一行。

＆＃13;
＆＃13; 
$(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");
        }
    });
});
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

您可以将display: inline-block添加到label元素，然后限制它们的宽度，使它们不会环绕：

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

答案 1 :(得分：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/

答案 2 :(得分：0)

这里似乎是一个小提琴：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;
}

答案 3 :(得分：0)

您可以浮动元素本身，然后使用标签上的边距将其从复选框中分隔出来：

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

JSFIDDLE

相关问题
最新问题