CSS float right 向右和向下移动元素（我不想向下）。

Question

我有一张表（以引导程序为主题，由 Django 管理员生成）。

在其中一列中，我有一个 div，其中包含三个元素、锚点和两个跨度 - 每个跨度都显示引导 glyphicon。

<div class="my-fixed-width under-review data-sent-false">
    <a href="myobjectview/789/" style="inline-block;">C4U0UACXX-8 6nb</a>&nbsp;
    <span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
    <span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
</div>

我想让图标向右移动（最好在同一列中的表格元素之间排列）。

我的问题是，当我将 float:right 添加到跨度时，它会将它们向右移动，但也会向下移动并扩展 div 高度。

float:right 添加后：

如何在正确移动元素的同时使图标保持与以前相同的垂直位置？ （我试过位置：绝对，明确：两者）。

Answer 1

这个问题已经有一段时间了，但我找到了一个很好的答案，所以我想分享一下。

根据 this answer 我在 StackOverflow 上的其他地方找到的，您想要正确浮动的元素需要首先在您的 html 结构中给出。

<div class="my-fixed-width under-review data-sent-false">
    <span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
    <span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
    <a href="myobjectview/789/" style="inline-block;">C4U0UACXX-8 6nb</a>&nbsp;
</div>

这个错误在我自己的网站上给我带来了各种各样的麻烦，但当我发现这个问题后，我意识到理解修复其实很简单。当您在其他所有内容之后放置一个 float:right 元素时，它会像您要求的那样向右浮动。但是如果右边没有足够的空间（或者如果浏览器渲染的一些怪癖让它认为没有足够的空间），那么该元素也会被向下推，所以浏览器会满意它会适合。但是如果你把 float:right 元素放在第一位，那么它会在浏览器布置任何其他元素之前就在它应该在的地方。然后那些没有 float:right 的按照他们通常的布局放入，包括调整自动宽度或自动边距以适应浮动元素。

我在测试时没有发生这种情况，但是即使最初没有将它们从原始位置推下，这种配置仍可能导致它们彼此重叠，但如果发生这种情况，请尝试添加display:inline-block 像这样：

span.glyphicon{
    float:right;
    display:inline-block;
}

请参阅this JSFiddle 的示例，该示例使用放置在锚点之前的跨度。

Answer 2

如果它在您不希望它出现时出现故障，则只需添加一个 “边距顶部：-(###)px;” 到 CSS

Answer 3

也许您应该发布所有代码，因为 float right 不应该这样做。看到那个codepen：http://codepen.io/mbrillaud/pen/myKjPO

.my-fixed-width{
    width:200px;
    background-color: orange;
}
.icon{
    float: right;
}

如果要使用position:absolute，别忘了设置parent为position:relative，像这样：http://codepen.io/mbrillaud/pen/jEKpqx

.my-fixed-width{
    position: relative;
    width:200px;
    background-color: orange;
}
.icon{
    position: absolute;
    right: 0;
    top: 0;
}