极客观点
研发管理
HarmonyOS
图1：
图2：
如图，如何实现该布局（如图1），查看更多按钮要一直在右边。一开始，查看更多按钮用float：right;但是如果屏幕分辨率刚好会出现图2的情况，如何解决
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tips{
width: 1000px;
}
.click-more{
color: #409eff;
float: right;
cursor: pointer;
}
.el-icon{
margin-left: 4px;
transition: all 0.3s;
}
.btn-list{
width: 1000px;
text-align: right;
}
.btn-list button{
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
border: 1px solid #409eff;
border-color: #DCDFE6;
color: #FFF;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
background-color: #409eff;
}
</style>
</head>
<body>
<div class="tips">
<span>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</span>
<!-- <span>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉拉巴拉巴</span> -->
<span class="click-more">查看更多<i :class="`el-icon el-icon-d-arrow-right`"></i></span>
</div>
<div class="btn-list">
<button>保存</button>
</div>
</body>
</html>
html5
给.tips加下面两个设置就可以了。