我试图将不同的标签放在CssLayout中,标签未采用设置的边距的问题。
这是我写的:
private Component productSettingsLabel = new Label();
CssLayout layoutRight = new CssLayout() {
@Override
protected String getCss(Component c) {
return "margin-top: 8px; margin-left: 8px";
}
}
layoutRight.addComponent(productSettingsLabel);
productSettingsLabel.setCaption("Product settings");
指定的边距未应用在标签上。
这是我用萤火虫检查添加的文本时得到的结果:
<div class="v-caption v-caption-searcher-title">
<div class="v-captiontext">Product settings</div>
<div class="v-caption-clearelem"></div>
</div>
在标签下显示一条空白水平线,这是其检查结果:
<div class="v-label v-label-searcher-title
searcher-title" style="margin-top: 8px; margin-left: 8px; width: 434px;">
</div>
因此,标题与标签是分开的。并且由于标题不被视为“组件”(在重写的getCss()方法中),因此未对其应用样式。
我希望我提供了所有细节。
最佳答案
将display: inline-block;
添加到您的样式。
private Component productSettingsLabel = new Label();
CssLayout layoutRight = new CssLayout() {
@Override
protected String getCss(Component c) {
return "display: inline-block; margin-top: 8px; margin-left: 8px";
}
}
layoutRight.addComponent(productSettingsLabel);
productSettingsLabel.setCaption("Product settings");
display: inline-block
的示例:label {
display: inline-block;
border: 1px solid grey;
margin-top: 8px;
margin-left: 8px;
width: 434px;
}
<label>Some text</label>
<label>Some text</label>
关于css - 如何在标签上应用CSS边距,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36594479/