极客观点
项目管理
HarmonyOS
问题描述
只是改变了父元素的position属性，子元素的排列方式就改变了。
问题出现的环境背景及自己尝试过哪些方法
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.8.1/css/all.css">
<style>
body {
margin: 0;
padding: 0;
background: #2ecc71;
}
.middle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
.sm-menu {
position: relative;
}
</style>
</head>
<body>
<div class="middle">
<div class="sm-menu">
<a href="#"> a</a>
<a href="#"> q</a>
<a href="#"> a</a>
<a href="#"> q</a>
<a href="#"> a</a>
<a href="#"> q</a>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet aliquam consectetur enim eos perspiciatis architecto quidem veritatis neque vero eum? Tempora, omnis nihil. Numquam sit laborum, asperiores rem eveniet architecto.
</div>
</div>
</body>
</html>
图片1母元素设置为absolute，子元素竖着排列
图片2设置为absolute，子元素横着排列
图片3设置为absolute，最后加一个长文字，元素横着排列，而且文字会换行。
图片4设置为relative，最后加一个长文字，元素横着排列，但是换行的位置absolute时候不一样。
因为没有宽度，给父级或者子集设置宽度就会发现