Question

我有一张向左漂浮的图像（80 * 80像素）。在右边我想要一些文字和一个按钮。

文本的边距为90px左右，并且位于图片右侧的10px处。即。边距忽略浮动图像。

我还有一个按钮，我想与文本对齐。但是，当我将按钮的左边距设置为90px时，它会将按钮90px移动到图片边缘的右侧 - 即。它似乎没有像对图像那样忽略浮动文本。

为什么会这样？我创建了一个简单的plnkr来显示它的样子：http://plnkr.co/edit/YLgBSIYF750xgPlzrSuB

HTML看起来像这样：

<svg class="picture" height="80px" width="80px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
  <path ...... />
</svg>

<div class="title">Some Text</div>

<button class="button">A Button</button>

CSS看起来像这样：

.picture {
  float: left;
}

.title {
  margin-left: 90px;
  font-size: 25px;
}

.button {
  margin-left: 90px;
}

Answer 1

您的按钮不是块元素。这意味着它被解释为流向图像左侧的文本。

将按钮更改为display: block，其行为与文本相同。

或者，将文本包装在不是块元素的元素中（或将div更改为display：inline），并且不要在其上设置边距。

保证金左侧为按钮与保证金左侧为文本旁边浮动的左侧图像

1 个答案: