Question

我遇到了问题，我将hr标记插入了一个flex-box容器中，当我尝试更改屏幕尺寸时，hr元素的行也会更改其高度。而且，同一flex容器中的3条线的高度也不相同。

可能存在带有容器或其他元素大小的东西。我不明白。

代码如下：

<!DOCTYPE html>
<html>
 <head>
<title> Bisness template </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Arial', serif;
	font-size: 1em;
}
	button {
	padding: 10px 15px;
  	width: 150px;
	background-color: rgb(231, 173, 72); 
 	border: none;
 	color: white;
  	text-align: center;
  	text-transform: uppercase;
}
	.prices {
	display: flex;
	flex-direction: column;
	background-color: rgb(231, 237, 243);
	padding-top: 50px;
	padding-bottom: 80px;
}
.prices > h3 {
	align-self: center;
	text-align: center;
	color: rgb(57, 75, 80);
	font-size: 1.5em;
}
.prices > p {
	align-self: center;
	text-align: center;
	padding-top: 2px;
	color: rgb(117, 136, 141);
}
.prices .list {
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding-top: 70px; 
}
.prices .el {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 450px;
	width: 380px;
	background-color: white;
	color: rgb(180, 186, 192);
	text-transform: uppercase;
	border-radius: 5px;
	border: 1px solid rgb(203, 213, 223);
}
.prices .main-el {
	height: 500px;
	background-color: rgb(112, 157, 202);
	position: relative;
	color: rgb(194, 225, 225);
	top: -25px;
	border: none;
}
.prices .element-content {
	display: flex;
	flex-direction: column;
	width: 80%;
}
.prices .el .element-content > h4 {
	color: rgb(129, 139, 149);
	font-size: 28px;
	padding-bottom: 20px;
	text-align: center;
	font-weight: normal;
}
.prices .el .element-content > h4 + p {
	padding-top: 0;
	padding-bottom: 0;
}
.prices .el  .element-content > p {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
}
.prices .el .pr {
	color: rgb(255, 187,66);
	font-size: 54px;
	padding-bottom: 0;
}
.prices .el .element-content .pr  > sup {
	font-size: 32px;
}
.prices .el .element-content .pr + p {
	padding-top:  0;
	padding-bottom: 30px;
}
.prices .el .element-content > button {
	align-self: center;
	margin-top: 20px;
	font-size: 0.9em;
	padding: 15px;
	background-color: rgb(255, 187,66);
}
.prices .el .element-content > hr {
	border: none;
	color: rgb(226, 233, 240);
	background-color: rgb(226, 233, 240);
	height: 2px;
}
.prices .main-el .element-content .pr {
	color: white;
}
.prices .main-el .element-content > h4 {
	color: white;
}
.prices .main-el  .element-content > hr {
	background-color: rgb(194, 225, 225);
}
</style>
 </head>
<body>
<section class="prices">
	<h3> Choose your price </h3>
	<p>Lorem ipsum dolor sit ameor m dolor sit am s itor si.</p>
	<div class="list">
	<div class="el">
		<div class="element-content">
		<h4>Basic plan</h4>
		<p class="pr"><sup>$</sup>22 </p> 
		<p> per month</p>
    	<hr>
		<p>1 account</p>
		<hr>
		<p>8 hours support</p>
		<hr>
		<p>custom cloud services</p>
		<button> Get started </button>
	    </div>
	</div>
	<div class="el main-el">
		<div class="element-content">
		<h4>Premium plan</h4>
		<p class="pr"><sup>$</sup>42 </p> 
		<p> per month</p>
		<hr>
		<p>1 account</p>
		<hr>
		<p>8 hours support</p>
		<hr>
		<p>custom cloud services</p>
		<button> Get started </button>
		</div>
	</div>
	<div class="el">
		<div class="element-content">
		<h4>Gold plan</h4>
		<p class="pr"><sup>$</sup>62 </p> 
		<p> per month</p>
		<hr>
		<p>1 account</p>
		<hr>
		<p>8 hours support</p>
		<hr>
		<p>custom cloud services</p>
		<button> Get started </button>
	    </div>
	</div>
	</div>
</section>
	</body>
</html>

为什么<hr>元素会更改其高度？

0 个答案: