无法查看标签标记中的跨度标记
Unable to view span tag within label tag?
本文关键字:标签 更新时间:2024-01-27
我使用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元素?请朋友们帮我…
我不确定,但看起来您正遭受html整洁的困扰。试着把一些东西放进空的跨度(例如 ;)。你可以在那里尝试,只需将你的html放入表单,然后按下"整洁"按钮。所有空标签都将从结果html中删除。
相关文章:
- 在<页眉>标签
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- iframe正在添加标签,需要删除它们
- 如何自动调整标签的高度以适应内容
- Jquery标签插件粘贴问题
- Twitter引导程序Typeahead-Id&标签
- Highcharts-如何在自定义格式化程序中获得默认的y轴标签格式化程序
- Morris.js折线图x轴标签在调整大小后消失
- JavaScript goto 标签如何使用内部循环
- 显示某个用户ID的某个标签的30张Instagram图片
- 标签客户端的设置值
- 谷歌图表显示所有标签
- 如何在图片和边缘之间居中设置标签
- 在Datatables中设置本地化后,需要更改标签文本
- 第二组标签及其内容赢得'默认情况下t加载
- 在一个javascript文件中为整个网站创建标签
- 兰吉 |如何在 span 标签上使用单击事件删除突出显示的文本
- Knockout.JS标签在foreach内部不起作用
- 如何在离子框架+有角度的框架中制作顶部标签
- 是否可以自动拉取“随机”;标签“;从一长串文本中提取