极客观点
项目管理
HarmonyOS
css问题 下面代码 为什么ul使用绝对定位居中 a元素变成块元素 文字会垂直
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
/* 初始化 取消页面的内外边距 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 渐变背景 本人比较偏爱渐变背景 */
background: linear-gradient(200deg,#dad4ec,#f3e7e9);
}
ul{
/* 绝对定位 水平、垂直居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* 弹性布局 */
display: flex;
margin: 0;
padding: 0;
}
ul li{
list-style: none;
/* 这里加个动画过渡 */
transition: 0.5s;
}
ul li a{
/* 相对定位 */
position: relative;
display: block;
text-align: center;
margin: 0 30px;
color: #333;
font-size: 40px;
text-decoration: none;
}
</style>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">用户反馈</a></li>
</ul>
</body>
</html>为什么用绝对定位居中宽度展示文字会被挤下去
如下图
如果用flex布局居中就是没问题
代码如下图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
/* 初始化 取消页面的内外边距 */
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
/* 100%窗口高度 */
height: 100vh;
/* 渐变背景 本人比较偏爱渐变背景 */
background: linear-gradient(200deg,#dad4ec,#f3e7e9);
}
ul{
/* 绝对定位 水平、垂直居中 */
/* 弹性布局 */
display: flex;
margin: 0;
padding: 0;
}
ul li{
list-style: none;
/* 这里加个动画过渡 */
transition: 0.5s;
}
ul li a{
/* 相对定位 */
position: relative;
display: block;
text-align: center;
margin: 0 30px;
color: #333;
font-size: 40px;
text-decoration: none;
}
</style>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">用户反馈</a></li>
</ul>
</body>
</html>效果如下图
其实和
absolute元素的block width的计算有关css2 block width: Absolutely positioned, non-replaced elements
该问题背景下应该应用以下计算规则。
如何计算
shrink-to-fit?在该问题背景下，最终计算得到的
shrink-to-fit width应该是available width。preferred minimum with，每一个元素都被挤到一列排布了。preferred with，每个元素的文本按一行来排布。最后再计算
right(之前在计算width的时候假设right为0，并不是它最终的计算值)。该问题背景下right应该为0。但是从最终的效果来看，它是水平居中的，离着右侧边缘还有一定的距离，怎么会是0呢?因为我们使用了transform: translate(-50%, -50%)。附:
由于对
absolute元素的block width的计算产的误解而导致和预想的不一致或对产生的效果不理解的问题，看到过几次了。(今天我在为回答问题overflow创建的BFC和float创建的BFC 为什么会有这样的区别？而查阅资料的时候，偶然在文档中发现对应的说明😂。)