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，但无法在浏览器的标签元素中看到span元素（chrome，firefox）。

的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元素？请朋友们帮帮我......

Answer 1

我不确定，但看起来你正在遭受html整洁。试着把东西放到空的范围内（例如＆amp; nbsp;）。您可以尝试there只需将您的HTML格式化，然后按＆＃34; Tidy＆＃34;按钮。所有空标记都将从结果html中删除。

无法在标签标签中查看范围标签？

1 个答案: