我试图将不同的标签放在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/

10-12 12:40
查看更多