使用 CSS justify-content 属性的解决方案
在下面的示例中，我们将显示设置为“flex”并将带有“flex-end”值的 justify-content 属性添加到我们的 <div> 元素的类中。
将按钮与 justify-content 属性的“flex-end”值对齐的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 250px;
border: 1px solid pink;
}
p {
margin-bottom: 20px;
}
.flex-end {
background-color: pink;
padding: 10px 0;
display: flex;
justify-content: flex-end;
}
</style>
</head>
<body>
<div>
<p>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</p>
<p>
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
<div class="flex-end">
<button type="button">Button</button>
</div>
</div>
</body>
</html>
使用 CSS float 属性的解决方案
使用带有“right”值的 CSS float 属性来右对齐按钮。
我们使用的对齐技术取决于具体情况，但其中使用 float 属性很重要。
使用 CSS 浮动属性将按钮向右对齐的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 200px;
overflow: hidden;
border: 1px solid #ff1100;
clear: both;
}
p {
margin-bottom: 10px;
}
input.right {
float: right;
}
</style>
</head>
<body>
<div>
<p>
经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</p>
<p>
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
<input type="button" value="Click here" class="right">
</div>
</body>
</html>
我们可以通过在父容器上使用设置为“隐藏”的溢出属性或者使用容器底部的 clear 属性的“both”值来清除浮动。
在此代码中，我们可以找到使用以下 CSS 属性右对齐按钮的各种示例：float、text-align 和 justify-content。
下面，我们将展示每个解决方案。
使用 CSS text-align 属性的解决方案
也可以使用 CSS text-align 属性将 <button> 元素向右对齐。
在下面的示例中，我们将 <div> 元素的 text-align 设置为“right”，并为 <p> 元素使用相同属性的“left”值。
使用 CSS text-align 属性将按钮向右对齐的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 200px;
border: 1px solid #ff1100;
text-align: right;
}
p {
margin-bottom: 10px;
text-align: left;
}
</style>
</head>
<body>
<div>
<p>
经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</p>
<p>
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
<button type="button">按钮</button>
</div>
</body>
</html>
如果要将按钮向右移动，还可以将按钮放在 <div> 元素中，并将 text-align 属性及其“right”值添加到 <div> 的“align-right”类中。
将按钮与 text-align 属性的“right”值对齐的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 200px;
border: 1px solid green;
}
p {
margin-bottom: 10px;
}
.align-right {
text-align: right;
border: 0;
}
</style>
</head>
<body>
<div>
<p>
经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</p>
<p>
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
<div class="align-right">
<button type="button">Button</button>
</div>
</div>
</body>
</html>
日期：2020-06-02 22:15:11 来源：oir作者：oir