javascript - 无法查看 label 标签内的 span 标签？

Question

我使用 GWT 创建了一个新的小部件。编码如下

private DivElement divElement;
private SpanElement spanElement;
private LabelElement labelElement;
private InputElement inputElement;

divElement = DaisDOM.getDivElement();

labelElement = DaisDOM.getLabelElement();
labelElement.setInnerText(label);

spanElement = DaisDOM.getSpanElement();
spanElement.setId(WidgetHelper.getUniqueId());
spanElement.appendChild(Document.get().createSpanElement());

labelElement.appendChild(spanElement);

divElement.appendChild(inputElement);
divElement.appendChild(labelElement);
setElement(divElement);

System.out.println(divElement);

它可以正常工作并在控制台中打印 divElement，但无法在浏览器(chrome、firefox)的标签元素中看到 span 元素。

CSS:

input[type=checkbox],
input[type=radio   ]{
width     : 2em;
margin    : 0;
padding   : 0;
font-size : 1em;
opacity   : 0;
}

input[type=checkbox] + label,
input[type=radio   ] + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
}

input[type=checkbox] + label > span,
input[type=radio   ] + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-   gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}

input[type=checkbox]:checked + label > span,
input[type=radio   ]:checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}

input[type=checkbox]:checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}

input[type=radio]:checked +  label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}

控制台输出:

<div>
 <input type="radio">
 <label><span id="dais-gwt-0">
  <span>
   </span>
  </span>
 </label>
</div>

我得到以下输出:

<div style="position: absolute; left: 0px; top: 0px;">
  <input type="radio" id="dais-gwt-1">
    <label id="dais-gwt-1">Apple</label>
</div>

我想要以下输出:

<div style="position: absolute; left: 0px; top: 0px;">
  <input type="radio" id="dais-gwt-1">
    <label id="dais-gwt-1">
     <span>
        <span></span>
     </span>
    Apple</label>
</div>

如何在 label 元素中添加空的 span 元素？请 friend 们帮帮我...

Answer 1

我不确定，但看起来您正遭受 html 整洁之苦。只需尝试将一些东西放入空范围内(例如  )。你可以试试there只需将您的 html 放入表单中，然后按“Tidy”按钮即可。所有空标签将从结果 html 中删除。