Html 如何停止标签：当标签包装时，在包装之前？它包括什么_Html_Css

Html 如何停止标签：当标签包装时，在包装之前？它包括什么

html css

Html 如何停止标签：当标签包装时，在包装之前？它包括什么,html,css,Html,Css,label:before是一个自定义复选框，label:after是自定义复选框中的复选标记。原始输入[type=checkbox]设置为display:hidden` 我有一个列表，列表中的每个li都有两个图标，然后是标签：在之前和之后，有两个图标绝对位于右侧问题当标签的文本占据多行时，则标签：before元素将与它一起换行我无法让JSFIDLE工作。所以，我上传了问题的图片和代码它应该做什么当标签的内容或文本换行时，我不希望将标签：before或input[type=checkbo

label:before

是一个自定义复选框，

label:after

是自定义复选框中的复选标记。原始输入[type=checkbox]

设置为

display:hidden`

我有一个列表，列表中的每个

li

都有两个图标，然后是

标签：在之前和之后，有两个图标绝对位于右侧
问题
当标签
的文本占据多行时，则标签：before
元素将与它一起换行
我无法让JSFIDLE工作。所以，我上传了问题的图片和代码
它应该做什么
当标签的内容或文本换行时，我不希望将标签：before
或input[type=checkbox]
换行
第一幅图显示了包装如何移动复选框。这是错误的
第二幅图显示了它应该如何包装。这是正确的
它目前的工作方式和其他工作方式
标签内容的包装通过word break:break all
完成，因为标签的宽度未知
所有图标都位于显示：内联块中
标签
设置为位置：相对
，自定义复选框设置为位置：绝对
。因此，复选框保持在标签的一侧
CSS
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; }

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


展开\u more重新排序
单行内容设置永久删除

展开\u more重新排序
多行内容多行内容多行内容多行内容多行内容多行内容多行内容设置永久删除

展开\u more重新排序
单行内容设置永久删除

展开\u more重新排序
非常长的多行内容-FGKFBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBHjDBH



当前情况如何

我希望它看起来如何
我的建议：在图标宽度的元素中添加左右填充。然后将所有图标的位置更改为绝对，并应用顶部/左侧位置值
因此图标都在标签的“外部”，但在
的填充区域
您的图标宽度为14px，边距为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 */

/*。。。保留当前代码并添加或更改以下内容：*/
李{
/* ... */
填充：0 48px 0 72px；
}
/*不需要改变标签的填充，因为它应该
装满容器*/
输入[type=“checkbox”]：选中+标签，
输入[type=“checkbox”]：未（：选中）+标签{
单词break：打破一切；
显示：内联；
光标：指针；
填充：0；
}
/*具有绝对位置的所有图标*/
li.下拉列表，li.交叉，li.拖动，li.设置图标{
绝对位置；
排名：0；
}
/*然后添加位置值。您的具有相对位置，
所以这些值是在li容器上定位的*/
李，下拉列表{
左：0；
}
李，拖拉{
左：24px；
}
李，十字架{
右：0px；
}
李.塞顿{
右：24px；
}
/*左侧第三个图标：复选框*/
输入[type=“checkbox”]：选中+标签：在，
输入[type=“checkbox”]：未（：选中）+标签：之前{
位置：绝对；/*已设置，保留它*/
左：48px；
顶部：0px；
}
/*并修改左/顶部的位置✔ 这样它又合身了*/
我的建议：在图标宽度的
元素中添加左右填充。然后将所有图标的位置更改为绝对，并应用顶部/左侧位置值
因此图标都在标签的“外部”，但在
的填充区域
您的图标宽度为14px，边距为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 */

/*。。。保留当前代码并添加或更改以下内容：*/
李{
/* ... */
填充：0 48px 0 72px；
}
/*不需要改变标签的填充，因为它应该
装满容器*/
输入[type=“checkbox”]：选中+标签，
输入[type=“checkbox”]：未（：选中）+标签{
单词break：打破一切；
显示：内联；
光标：指针；
填充：0；
}
/*具有绝对位置的所有图标*/
li.下拉列表，li.交叉，li.拖动，li.设置图标{
绝对位置；
排名：0；
}
/*然后添加位置值。您的具有相对位置，
所以这些值是在li容器上定位的*/
李，下拉列表{
左：0；
}
李，拖拉{
左：24px；
}
李，十字架{
右：0px；
}
李.塞顿{
右：24px；
}
/*左侧第三个图标：复选框*/
输入[type=“checkbox”]：选中+标签：在，
输入[type=“checkbox”]：未（：选中）+标签：之前{
位置：绝对；/*已设置，保留它*/
左：48px；
顶部：0px；
}
/*并修改左/顶部的位置✔ 这样它又合身了*/
@OopsD'oh-我用另一张图片编辑了这篇文章，显示了我希望内容的显示方式。上面的CSS代码仅用于当前内容，它仅显示列表和图标的规则。@OopsD'oh-我已经用另一个图像编辑了文章，显示了我希望内容的显示方式。上面的CSS代码只用于当前的东西，它只显示列表和图标的规则。嘿，谢谢你的建议，但它不适用于这种情况，因为我在列表中有一个子列表，当我应用上面的规则时，它会变得奇怪。因此，我没有应用绝对填充，而是给标签一个宽度，然后对齐它