如果要将 <span> 元素对齐到 <div> 的右侧，可以使用一些 CSS。
特别是，我们需要使用带有“right”和“left”值的 float 属性。
现在，我们将演示一个示例，然后对其进行解释。
将 <span> 对齐到 <div> 元素右侧的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.title {
display: block;
border-top: 5px solid #969696;
background-color: #76db95;
height: 30px;
line-height: 30px;
padding: 4px 6px;
font-size: 16px;
color: #000000;
margin-bottom: 13px;
clear: both;
}
.title .date {
float: right;
}
.title .name {
float: left;
}
</style>
</head>
<body>
<div class="title">
<span class="name">Example</span>
<span class="date">05.05.2016</span>
</div>
</body>
</html>
在我们的示例中，我们有一个带有两个 <span> 元素的 <div> 标签。
我们将带有“right”值的 float 属性应用于“date”类，将“left”值应用于 <span> 元素的“name”类。
此外，我们在“title”类上使用了带有“both”值的 clear 属性来防止两边的元素浮动。
因此，通过这种方式，我们可以将 <div> 元素中的 <span> 向右对齐，但让我们看看另一个示例。
使用 CSS flex 属性将 <span> 对齐到 <div> 元素右侧的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.title {
display: flex;
justify-content: space-between;
border-top: 5px solid #969696;
background-color: #76db95;
height: 30px;
line-height: 30px;
padding: 5px 15px;
font-size: 18px;
color: #212121;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="title">
<span>Example</span>
<span>05.05.2016</span>
</div>
</body>
</html>
日期：2020-06-02 22:15:05 来源：oir作者：oir