无法查看标签标签内的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);

它可以在控制台中正常工作并打印标签，但无法在浏览器(chrome，firefox)中查看divElement元素中的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>

如何在标签元素中添加空的span元素？请朋友们帮帮我。

Answer 1

我不确定，但看起来你正在遭受html整洁的痛苦。只需尝试将某些内容放入空跨度(例如，)。你可以试试there只需把你的html放入表格中，然后按下"Tidy“按钮。所有空标签将从结果html中删除。