CSS：マージンを使用してコンポーネントを配置する

Question

下の画像には、2つのタブhelpとInstructionsがあります。これらの2つのタブを、現在ヘルプタブがある場所に配置したいと考えています。 margin-left:プロパティを使用すると、ヘルプボタンのみが左に移動し、instructionsボタンは同じ場所にとどまります。

私はこれを構成するために使用していCSS：両方のタブ（vaadin成分）一緒に移動するように

.v-csslayout-topbarapplicant .v-button, 
.v-csslayout-topbarapplicant .v-nativebutton, 
.v-csslayout-topbarapplicant-invert .v-button, 
.v-csslayout-topbarapplicant-invert .v-nativebutton { 
    float: right; 
    display: inline; 
    margin-right:0px; 
    margin-left: 268px; 
    margin-top: -18px; 
    padding: 0 3px 2px 0; 

line-height: 11px; 
    } 

がどのように私は間隔を変更できますか？

Answer 1

あなたは、両方の項目がdivでラップされていることを確認する必要があります。次に、項目の1つだけでなく、margin-leftをそのdivに設定します。

どのアイテムが操作されているのかをCSSに伝える方法はありません。あなたが掲示したCSSの中にこれらの項目「help」と「Instructions」がある場合、両方の項目が1つになるように変更する必要があります。つまり、divです。これらのアイテムの1つだけがあなたのCSSに投稿されている場合は、そのうちの1つだけがCSSで操作され、そのアイテムがフローティングになっています。両方のアイテムが同じ方向に浮かび、ラップされていることを確認してください。このラッパーdivにマージンを適用します。

一般的な構造は次のようになります。

CSS：

#help, #instructions { 
     float: right; 
}   

    div#wrapper { 
     margin-left: 268px; 
    ] /* wrapper containing both items, "help" and "Instructions" */ 

はHTML：

​​

Answer 2

私はあなたには、いくつかの継承問題を抱えていると思います。 まず、このプロパティが継承している継承を確認することをお勧めします。まだ問題が残っている場合は、ヘルプと命令に個別のdivを作成します。私はこれが助けて欲しい！この種の問題は頑固です。