如何始终将“阅读更多 - 阅读更少”按钮放在段落末尾

Question

我的主页上有一个阅读更多/阅读更少按钮，现在一切正常，我只想让阅读更多按钮始终在段落末尾。因此，当它阅读更多(关闭(时，它将紧跟在第一段末尾之后，当它阅读更少(打开(时，它也需要在第二段的右侧。

这是它当前的样子：在此处输入图像描述

这就是我想要的样子：在此处输入图像描述

以下是代码片段：

$(function(){
	$.fn.readmore = function( options ) {
		var settings = $.extend({
			div: this,
			hideText: "Read Less...",
			readText: "Read More...",
			isTextShown: false,
			effect: true,
			effectOption: "fast",
			buttonClasses: "btn-primary opacity-rollover",
			id: "read-more-action"
		},options);
		if(settings.isTextShown === false){
			$(settings.div).hide();
			$(settings.div).parent().append("<button id='"+settings.id+"' class='"+ settings.buttonClasses +"'>"+ settings.readText + "</button>");
		}else{
			$(settings.div).parent().append("<button id='"+settings.id+"' class='"+ settings.buttonClasses +"'>"+ settings.hideText + "</button>");
		}
		$(settings.div).parent().find("#" + settings.id).bind("click.readmore", function () {
			if(settings.isTextShown === false){
				$(settings.div).parent().find("#" + settings.id).text(settings.hideText);
				if(settings.effect === true){
					$(settings.div).fadeIn(settings.effectOption);
				}else{
					$(settings.div).show();
				}
				settings.isTextShown = true;
			}else{
				$(settings.div).parent().find("#" + settings.id).text(settings.readText);
				if(settings.effect === true){
					$(settings.div).hide();
				}else{
					$(settings.div).fadeOut(settings.effectOption);
				}
				settings.isTextShown = false;
			}
		});
	};
});
		$(function(){
			$(".read-more").readmore({
				buttonClasses: "btn btn-primary",
			});
		});

	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.1/materia/bootstrap.min.css" rel="stylesheet">
		<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
		<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    
<div class="container" style="margin-top: 2em">
	<h1>Read More/Read Less Buttons</h1>
		<article>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum metus ac semper finibus. Praesent vulputate augue ac tempus congue.
				Curabitur in sapien semper, tristique arcu eget, pharetra risus. Donec tempus aliquet purus eu lobortis.
				Etiam ac finibus felis. Integer congue sit amet neque sit amet pellentesque. Donec cursus interdum rutrum.
				Interdum et malesuada fames ac ante ipsum primis in faucibus.
			</p>
			<p class="read-more">Praesent luctus at erat at sagittis.
				Etiam posuere, erat nec laoreet ornare, odio dui mattis nisl, convallis semper ligula lectus eu turpis.
				Phasellus pharetra risus tortor, eget fringilla tortor laoreet at. Quisque egestas tristique dui. Mauris non iaculis ex.
				Ut pellentesque, massa ut molestie egestas, tortor leo imperdiet sem, vitae malesuada nibh dolor in magna. Etiam pulvinar pharetra dolor, vel dapibus ipsum commodo eget.
				Praesent turpis odio, suscipit ut ullamcorper vel, finibus at ligula. Phasellus dolor lectus, molestie a velit sed, iaculis rhoncus risus.
				Ut id pellentesque erat, quis elementum ligula. Donec dignissim diam sem, a bibendum erat mattis quis. Vivamus id erat dui. Vestibulum sollicitudin ac justo at lacinia.
			</p>
		</article>
	</div>

任何帮助都值得赞赏，谢谢！

Answer 1

你应该添加到

你的元素

中

display: inline

$(function(){
	$.fn.readmore = function( options ) {
		var settings = $.extend({
			div: this,
			hideText: "Read Less...",
			readText: "Read More...",
			isTextShown: false,
			effect: true,
			effectOption: "fast",
			buttonClasses: "btn-primary opacity-rollover",
			id: "read-more-action"
		},options);
		if(settings.isTextShown === false){
			$(settings.div).hide();
			$(settings.div).parent().append("<button id='"+settings.id+"' class='"+ settings.buttonClasses +"'>"+ settings.readText + "</button>");
		}else{
			$(settings.div).parent().append("<button id='"+settings.id+"' class='"+ settings.buttonClasses +"'>"+ settings.hideText + "</button>");
		}
		$(settings.div).parent().find("#" + settings.id).bind("click.readmore", function () {
			if(settings.isTextShown === false){
				$(settings.div).parent().find("#" + settings.id).text(settings.hideText);
				if(settings.effect === true){
					$(settings.div).fadeIn(settings.effectOption);
				}else{
					$(settings.div).show();
				}
				settings.isTextShown = true;
			}else{
				$(settings.div).parent().find("#" + settings.id).text(settings.readText);
				if(settings.effect === true){
					$(settings.div).hide();
				}else{
					$(settings.div).fadeOut(settings.effectOption);
				}
				settings.isTextShown = false;
			}
		});
	};
});
		$(function(){
			$(".read-more").readmore({
				buttonClasses: "btn btn-primary",
			});
		});

	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.1/materia/bootstrap.min.css" rel="stylesheet">
		<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
		<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    
<div class="container" style="margin-top: 2em">
	<h1>Read More/Read Less Buttons</h1>
		<article>
			<p style="display: inline">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum metus ac semper finibus. Praesent vulputate augue ac tempus congue.
				Curabitur in sapien semper, tristique arcu eget, pharetra risus. Donec tempus aliquet purus eu lobortis.
				Etiam ac finibus felis. Integer congue sit amet neque sit amet pellentesque. Donec cursus interdum rutrum.
				Interdum et malesuada fames ac ante ipsum primis in faucibus.
			</p>
			<p class="read-more" style="display: inline">Praesent luctus at erat at sagittis.
				Etiam posuere, erat nec laoreet ornare, odio dui mattis nisl, convallis semper ligula lectus eu turpis.
				Phasellus pharetra risus tortor, eget fringilla tortor laoreet at. Quisque egestas tristique dui. Mauris non iaculis ex.
				Ut pellentesque, massa ut molestie egestas, tortor leo imperdiet sem, vitae malesuada nibh dolor in magna. Etiam pulvinar pharetra dolor, vel dapibus ipsum commodo eget.
				Praesent turpis odio, suscipit ut ullamcorper vel, finibus at ligula. Phasellus dolor lectus, molestie a velit sed, iaculis rhoncus risus.
				Ut id pellentesque erat, quis elementum ligula. Donec dignissim diam sem, a bibendum erat mattis quis. Vivamus id erat dui. Vestibulum sollicitudin ac justo at lacinia.
			</p>
		</article>
	</div>