如何使用flex水平显示hr? [英] How to display hr horizontally with flex?
本文介绍了如何使用flex水平显示hr?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用 flexbox 进行样式设置时,如果父容器设置为 display: flex
将导致 <hr/>
垂直显示而不是水平显示.
.container {显示:弹性;弹性:1;}
<h2>测试</h2><小时/>
解决方案
使用 flex-grow: 1
或 width: 100%
使其增长以匹配宽度父母的.如果您打算在 .container
<中放置更多 flex 子项,您可能希望将其与 .container
上的 flex-wrap: wrap
结合使用/p>
.container {显示:弹性;弹性:1;}小时{弹性增长:1;/* 宽度:100%;*//* 或这个 */}
<小时>
When using flexbox for styling, if the parent container is set to display: flex
it will cause the <hr />
to be displayed vertically instead of horizontally.
.container {
display: flex;
flex: 1;
}
<div class='container'>
<h2>Test</h2>
<hr />
</div>
解决方案
Use flex-grow: 1
or width: 100%
so it will grow to match the width of the parent. You probably want to use that in combination with flex-wrap: wrap
on .container
if you plan on putting more flex children in .container
.container {
display: flex;
flex: 1;
}
hr {
flex-grow: 1;
/* width: 100%; */ /* or this */
}
<div class='container'>
<hr>
</div>
这篇关于如何使用flex水平显示hr?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文