ラベルにCSSマージンを適用する方法

Question

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-label v-label-searcher-title 
      searcher-title" style="margin-top: 8px; margin-left: 8px; width: 434px;"> 
</div> 

：空白の水平線がラベルの下に表示され

<div class="v-caption v-caption-searcher-title"> 
    <div class="v-captiontext">Product settings</div> 
    <div class="v-caption-clearelem"></div> 
</div> 

ここではその検査結果です：ここで

は私が放火犯で追加したテキストを検査するとき、私は何を得るのですラベルから。また、キャプションは（オーバーライドされたgetCss（）メソッドの）「Component」とみなされないため、スタイルは適用されませんでした。

私はすべての詳細を述べたと思います。

Answer 1

あなたのスタイルに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>