CSS：使用边距定位组件 [英] CSS: Positioning components using margins

问题描述

在下图中，您可以看到我有两个选项卡 help 和说明，我要放置这些选项卡帮助选项卡当前所在的两个选项卡彼此相邻。当我使用 margin-left：属性时，只有帮助按钮向左移动，而指令按钮停留在

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.

我用来配置的CSS：

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

如何更改间距，以便两个制表符（vaadin组件）一起移动？

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

推荐答案

您需要确保这两项用 div 包裹。然后，将左边距设置为该 div ，而不只是其中一项。

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.

在CSS中无法告诉您已发布了哪些项正在被操纵。如果发布的CSS中都包含帮助和说明这两个项目，则您需要对其进行更改，以使两个项目都作为一个存在，即在一个 div 。如果您发布的CSS中只有其中一项，那么您只有其中一项正在使用CSS进行操作，并且该项目是浮动的。确保两个物品都沿相同方向漂浮并包装。将边距应用于此包装器 div 。

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.

常规结构应如下所示：

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>

这篇关于CSS：使用边距定位组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！