html - 在文本末尾放置绝对框（根据文本长度灵活调整）

Question

我想在文本链接的末尾放置一个绝对弹出框。

HTML

<div style="float:left;">Hello World</div><div class="box">BOX</div>

CSS

.box
{
    float:left;
    border-color:#000;
    border-style:solid;
    border-width:1px;
    width:80px;
    height:80px;
    text-align:center;
}

http://jsfiddle.net/7N6ye/1/

只有当一个盒子是相对的时它才能正常工作。当我设置position:absolute在盒子上时，它看起来像

http://jsfiddle.net/7N6ye/3/

有任何想法吗？最终，我会有一个链接列表，每个链接都有不同的文本长度。（并且每个框都会在文本末尾弹出）。

Answer 1

如果将位置设置为相对，则 div 将相对于其原始位置放置。例如，距您所在位置左侧 100 像素

如果将位置设置为绝对，则 div 相对于其父级（具有相对或绝对定位的下一个父级）放置。例如，距父级左角 100px

最重要的是，div 不再是文档流的一部分。所以其他元素可以与它重叠。

浮动元素也是如此。这里使用下一个可用位置。

一般来说，设置绝对定位和浮动是没有意义的。

Answer 2

这可能有效：

<div  class="box">Hello World<div>BOX</div></div>

使用 CSS：

.box {
    position: relative;
    border: 1px solid red;
    float: left;
}
.box div
{
    position:absolute;
    top: 0;
    left: 100%;
    border-color:#000;
    border-style:solid;
    border-width:1px;
    width:80px;
    height:80px;
    text-align:center;
    display: inline-box;
}

小提琴参考：http: //jsfiddle.net/audetwebdesign/DWe8B/

笔记

(1) 我将弹出框嵌套在文本行中。我可以解决这个问题。
问题是弹出窗口继承了父级的宽度，因此除非您指定宽度，否则框可能会很窄。