如何将文本定位在前一个文本块的末尾？答案

【问题标题】：How to position text at end of previous block of text?如何将文本定位在前一个文本块的末尾？
【发布时间】：2015-06-29 02:29:48
【问题描述】：

我们使用的 CMS 限制了我编辑 HTML 的能力。我有一段文字，后面是一个链接：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore。

点击这里

我们的设计师希望“点击此处”链接直接出现在文本段落的末尾：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore。 点击这里

是否可以使用 CSS 定位链接，使其始终出现在前一段的末尾？这是我们的 CMS 生成的 HTML：

<div class="item summary">
    <div class="content">
        <p>
            Lorem ipsum...
        </p>
    </div>
</div>  
<div class="item link">
    <div class="content">
        <a href="http://www.example.com">Click here</a>
    </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

为此，基本上所有元素（div、p、a）都需要是内联或内联块元素。

http://jsfiddle.net/mkeyh93f/

div.item{
    display: inline;
}

div.item p, div.item div, div.item a{
    display: inline;
}

只需确保您的元素上也没有任何默认填充和边距。我还建议将其全部包装在一个 div 或 article 容器中，并带有 display: block;

【讨论】：

谢谢。这会工作，但我们的 CMS 使用（和我们的顾问创建）如此复杂的嵌套和共享类，所以如果不破坏一堆其他东西，我就无法让它工作。不过感谢您的快速回复！
作为最后的更新，我确实设法完成了这项工作。我们的东西仍然很复杂，但是您的解决方案有效。再次感谢。

【解决方案2】：

你可以设置

float: right;

在您的项目链接中。或者使用表格布局。

提示：在您的 css 类名（“itemLink”）中不要设置空格。

【讨论】：

【解决方案3】：

如果可能，将 div 更改为 span 或 css，添加

.item, .item.content, .item.content p,
.item.summary .item.link {display: inline;}
.item.summary item.link .content {display: inline;}

这会改变 div element.m 的行为，这有点违反直觉。 DIV 在语义上是划分，因此不建议让 div 像 span 一样。仅作为最后的手段使用它

【讨论】：

【解决方案4】：

有一种使用 jquery 的方法我希望这会对你有所帮助，因为我们无法使用 css 进行调整。我们可以通过 jquery 使用它

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".link").each(function(){
       var a=$(this).children(".content").html();
$(this).siblings(".summary").children(".content").children("p").append(a);
    });
    $(".item.link").remove();
});
</script>

并且 html 内容没有变化试试这个，让我知道这个功能是否有效

【讨论】：

【解决方案5】：

div p{
float: Right;
}

or

div p{
Display: inline;
}

这些都对我有用

【讨论】：