如何停止标签：在包装标签包装之前？

Question

它由

组成

is set to是自定义复选框，li是自定义复选框中的复选标记。原始输入[type = checkbox] label:before显示：hidden`。

我有一个列表，该列表中的每个label都有两个图标，然后是label:before，之后，有两个图标绝对位于右侧。

问题

当label:before的文字占用多行时，input[type=checkbox]元素就会包含它。

我无法让jsFiddle工作。所以，我上传了问题和代码的图片。

应该做什么

当标签的内容或文字换行时，我不希望word-break: break-all或display: inline-block换行。

第一张图片显示了包装如何移动复选框。这是错误的。

第二张图片展示了它应该如何包装。这是正确的。

它目前的工作方式和做其他事情

标签的内容包装由label完成，因为标签的宽度未知。

所有图标都在position: relative。

position: absolute设置为ul { list-style-type: none; padding: 5px 10px 0px 10px; } li { position: relative; font-size: 16px; margin: 10px 0px; line-height: 16px; } li .dropdown, li .cross, li .drag, li .setIcon { vertical-align: middle; font-size: 18px; } //All the icons li .drag { margin-right: 5px; //The three lines icon margin-left: 5px; } li .cross, li .setIcon { position: absolute; } //Delete Icon and the settings icon li .cross { right: 0px; } //Delete Icon li .setIcon { right: 23px; } //Settings Icon input[type="checkbox"]:checked, input[type="checkbox"]:not(:checked) { display: none; } input[type="checkbox"]:checked + label, input[type="checkbox"]:not(:checked) + label { word-break: break-all; display: inline-block; position: relative; padding-left: 25px; cursor: pointer; padding-right: 45px; vertical-align: middle; } input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before { content: ''; position: absolute; display: block; left: 0px; top: 0px; width: 14px; height: 14px; line-height: 16px; border: 1px solid #E7E3E3; border-radius: 2px; white-space: nowrap; box-shadow: inset 0 0px 2px rgba(0, 0, 0, 0.6); } input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after { content: '✔'; position: absolute; top: 0px; left: 4px; line-height: 0.8; color: #42A5F5; } ，自定义复选框设置为<ul id="list"> <li><i class="dropdown material-icons md-dark">expand_more</i><i class="drag material-icons md-dark">reorder</i> <input type="checkbox" id="0"> <label for="0">Single Line Content</label><i class="material-icons md-dark setIcon">settings</i><i class="material-icons md-dark cross">delete_forever</i> </li> <li><i class="dropdown material-icons md-dark">expand_more</i><i class="drag material-icons md-dark">reorder</i> <input type="checkbox" id="2"> <label for="2">Multi Line Content Multi Line Content Multi Line Content Multi Line ContentMulti Line Content Multi Line Content</label><i class="material-icons md-dark setIcon">settings</i><i class="material-icons md-dark cross">delete_forever</i> </li> <li><i class="dropdown material-icons md-dark">expand_more</i><i class="drag material-icons md-dark">reorder</i> <input type="checkbox" id="3"> <label for="3">Single Line Content</label><i class="material-icons md-dark setIcon">settings</i><i class="material-icons md-dark cross">delete_forever</i> </li> <li><i class="dropdown material-icons md-dark">expand_more</i><i class="drag material-icons md-dark">reorder</i> <input type="checkbox" id="4"> <label for="4">Very Long Multi Line Content - fgkfbhjdfbbhjbfhjdfbjhdfbjdfhbdhjbdjhfbdjhdfbjhfbhjdbhjbdfhjbdfjhbdfhjbdfjhdfkfdhjgfbhjbhjbdjhbgjhfbhjdfb</label><i class="material-icons md-dark setIcon">settings</i><i class="material-icons md-dark cross">delete_forever</i> </li> </ul> 。因此，复选框保留在标签的一侧。

CSS

text1 = Java programming #data#2016#/data#.
text2 = Java programming #core#2016#/core#.
text3 = Java programming #year#2016#/year#.
text4 = Java programming #data#2016.
text5 = Java programming #core#2016.
        or another combination..

HTML

Split[0] : Java programming 
Split[1] : 2016 

目前情况

我希望它出现的方式

Answer 1

我的建议：左右添加填充图标宽度中的<li>元素。然后将所有图标的位置更改为绝对值并应用顶部/左侧位置值...

因此图标都在标签的“外部”，但在<li>的填充区域。

您的图标宽度为14像素，边距为5，因此它们完全是24像素宽。在左侧，您有3个图标，因此左边的填充将是72像素。在右侧（2个图标）填充将是48像素。

/* ... keep your current code and add or change following: */

li {
  /* ... */
  padding: 0 48px 0 72px;
}

/* no need to change padding of the label as it should
   take full with of the <li> container */
input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label {
  word-break: break-all;
  display: inline;
  cursor: pointer;
  padding: 0;
}

/* All icons with position absolute */
li .dropdown, li .cross, li .drag, li .setIcon {
  position absolute;
  top: 0;
}

/* Then add position values. Your <li> has position relative,
   so the values are orientated on the li container... */
li .dropdown {
  left: 0;
}
li .drag {
  left: 24px;
}
li .cross {
  right: 0px;
}
li .setIcon {
  right: 24px;
}

/* Third icon left side: Checkbox */
input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before {
  position: absolute; /* is already set, keep it*/
  left: 48px;
  top: 0px;
}

/* And modify the left/top position of the ✔ so that it fits again */