Question

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

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

点击此处

我们的设计师更愿意拥有＆＃34;点击此处＆＃34;链接直接出现在文本段落的末尾：

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>

Answer 1

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

http://jsfiddle.net/mkeyh93f/

div.item{
    display: inline;
}

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

确保元素上没有任何默认填充和边距。我还建议用div：block;

将它全部包装在div或article容器中

Answer 2

您可以设置

float: right;

在您的商品链接中。或者使用表格布局。

提示：在css类名称中不设置空格（＆＃34; itemLink＆＃34;）。

Answer 3

如果可能，将div更改为span或in 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作为跨度。仅将其用作最后的手段

Answer 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内容中的任何更改都不会尝试此操作并让我知道此函数是否有效

Answer 5

div p{
float: Right;
}

or

div p{
Display: inline;
}

这些都对我有用

如何在上一个文本块的末尾定位文本？

5 个答案: