CSS: Positioning components using margins

问题

In the image below, you can see i have two tabs help and Instructions, i want to place these two tabs next to each other where the Help tab currently is. When i use the margin-left: property, only the help button moves to the left and the instructions button stays in the same place.

The css i am using to configure this:

    .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;
    }

How can i change the spacing so that both tabs (vaadin components) move together?

回答1:

You need to make sure both items are wrapped with a div. Then you set the margin-left to that div, not only one of the items.

There's no way of telling in the CSS that you posted which items are being manipulated. If both of these items, "help" and "Instructions", are in the CSS you posted, then you to need to change it so that both items exist as one, meaning in one div. If only one of these items exist in your CSS that you posted, then you have only one of them being manipulated with the CSS, and that one is floating right. Ensure both items are floated in the same direction and they are wrapped. Apply the margin to this wrapper div.

The general structure should look like this:

CSS:

#help, #instructions {
       float: right; 
 }        

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

HTML:

<div id="wrapper">
   <div id="help"></div>
   <div id="instructions"></div>
</div>

回答2:

I think that you are having some inheritance problems. I would suggest first checking what inheritance this property is following, and if you still have problems I would then create separate divs for Help and Instructions, where instructions has a different right margin. I hope this helps! This type of problems are stubborn.

来源：https://stackoverflow.com/questions/8797549/css-positioning-components-using-margins

标签

components

vaadin

css