Question

为什么不能正确对齐？
当sectMid类具有已注释掉的正确宽度时，虽然各个div的大小等于它，但布局并不合适。
由于在div定位中误用了相对和绝对值，布局的复杂性是什么？

我不确定我是否可能遇到一个小问题，或者我尝试使用的技术是否存在缺陷。我希望所有的部件都适合，并且各部分之间没有空间使这件作品成为一个整体。中间部分的背景仅供参考。这个概念旨在模拟原型导航栏。每个圆圈的内容未正确对齐。目前，文本的定位不是问题。

＆＃13;

body{
	background: #202020;
}

.tabCnt{
	position: relative;
	border-radius: 50%;
}

.type1{
	width: 100px;
	height: 100px;
	background: white;
}

.type2{

	width: 100px;
	height: 100px;
	left:20px;
	top:20px;
	background: green;
}

.tabCnt2{
	position: relative;
	border-radius: 50%;
	width: 140px;
	height: 140px;
	background: brown;

}

.sectMid{
	width: 470px;/*440px*/
	height: 140px;
background: blue;}

.type1A{
	display: inline-block;
}

.vert{
	left:170px;
}

.yLine{
	width: 0;
	height: 50px;
	border-left: 8px solid black;
	position:relative;
	border-color: pink;
	left: 216px;
}

.xLine{
	top: 46px;
	width: 50px;
	height: 0px;
	border-bottom: 8px solid black;
	position:relative;
	border-color: pink;
	
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Personal Website</title>
</head>

<body>
	<div class= "navbarBig navbarSmall">
		<div class = "tabCnt type1 vert" style="text-align: center;"><br><br>PROJECTS</div>
		<div class = "yLine"></div>
		<div class= "sectMid">
			<div class = "tabCnt type1 type1A" style="float: left;top: 20px;text-align: center;"><br><br>RESUME</div>
			<div class = "xLine type1A"></div>
			<div class = "tabCnt2 type1A">
				<div class = "tabCnt type2">Active Tab Icon</div>
			</div>
			<div class = "xLine type1A"></div>
			<div class = "tabCnt type1 type1A" style="float: right;top: 20px;text-align: center;"><br><br>ABOUT<br>ME</div>
		</div>
		<div class = "yLine"></div>
		<div class = "tabCnt type1 vert" style="text-align: center;"><br><br>VIDEOS</div>
		
	</div>

</body>

</html>

＆＃13;

滥用相对和绝对是否导致错位

0 个答案: