CSS：使用边距定位组件

Posted 2023-02-23

【中文标题】CSS：使用边距定位组件

【英文标题】：CSS: Positioning components using margins

【发布时间】：2012-02-06 12:38:28

【问题描述】：

在下图中，您可以看到我有两个选项卡help 和Instructions，我想将这两个选项卡并排放置在“帮助”选项卡当前所在的位置。当我使用margin-left: 属性时，只有帮助按钮向左移动，instructions 按钮保持在同一个位置。

我用来配置这个的 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 组件）一起移动？

【参考方案1】：

您需要确保这两个项目都用div 包装。然后将margin-left 设置为div，而不仅仅是其中一项。

没有办法在 CSS 中说明您发布了哪些项目正在被操纵。如果这两个项目，“帮助”和“说明”，都在您发布的 CSS 中，那么您需要更改它，以便这两个项目作为一个项目存在，即在一个 div 中。如果您发布的 CSS 中只有其中一项存在，那么您只有其中一项被 CSS 操作，并且那一项是向右浮动的。确保两件物品都以相同的方向浮动并且被包裹起来。将边距应用于此包装器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>

【讨论】：

完美。也谢谢你的解释

【参考方案2】：

我认为您遇到了一些继承问题。 我建议首先检查此属性所遵循的继承，如果仍然有问题，我将为帮助和说明创建单独的 div，其中说明具有不同的右边距。我希望这有帮助！这类问题很顽固。