html - 如何使 float 链接元素的高度达到其父 div 的 100%

Question

我在页面底部有一个导航。一切正常，除了一个小错误外，我希望它如何工作，我似乎无法找到解决方案...

当页面名称很长并且您在 iPad 大小的屏幕上查看它时，名称会分为两行 - 这很好 - 我希望相邻按钮的高度匹配(所以它们都保持相同的高度) 并且都保持与中心水平对齐。

我尝试了一些不同的东西，比如显示表格和表格单元格、flex 等，但我似乎无法找到一个正常工作的解决方案。

关于如何执行此操作的任何建议...？

.footerNav-wrapper {
	width: 100%;
	background-color: #000;
	padding: 35px 0;
	z-index: 9000;
	position: relative;
}

.footerNav {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}

.navArrow-left {
	float: left;
	margin: 0;
	position: absolute;
	top: 30%;
	left: 10px
}

.navArrow-right {
	float: right;
	margin: 0;
	position: absolute;
	top: 30%;
	right: 10px;
}

.footerNav a {
	width: 49%;
	font-family: 'ABCSans-Regular', Arial, sans-serif;
	border: 1px solid #fff;
	background-color: #000;
	color:#ffc600;
	margin: 0;
	text-align: center;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0px;
	cursor: pointer;
	-webkit-transition: all .5s;
    transition: all .5s;
	text-decoration: none;
	box-sizing: border-box;
	position: relative;
}

.footerNav a:hover {
	border: 1px solid #ffc600;
	background-color: #ffc600;
	color: #000;
	text-decoration: none;
}

.left {
	float: left;
	text-align: left !important;
	padding: 15px 15px 12px 45px;
}

.right {
	float: right;
	text-align: right !important;
	padding: 15px 45px 12px 15px;
}

<div class="footerNav-wrapper">
	<nav class="footerNav">
    	<a href="#" class="left">
        	<img src="images/arrow-left-white.png"  class="navArrow-left" alt="Previous page">
        	PREVIOUS PAGE NAME
        </a>
        <a href="c#" class="right">
            NEXT PAGE NAME - THIS IS AN EXTRA LONG NAME
            <img src="images/arrow-right-white.png"  class="navArrow-right" alt="Next page">
        </a>
        <div style="clear:both;"></div>
    </nav>
</div>

Answer 1

我在 .footerNav 上使用了 display:flex; 并向左右类添加了边距。

.footerNav-wrapper {
	width: 100%;
	background-color: #000;
	padding: 35px 0;
	z-index: 9000;
	position: relative;
}

.footerNav {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
    display:flex;
}

.navArrow-left {
	float: left;
	margin: 0;
	position: absolute;
	top: 30%;
	left: 10px
}

.navArrow-right {
	float: right;
	margin: 0;
	position: absolute;
	top: 30%;
	right: 10px;
}

.footerNav a {
	width: 49%;
	font-family: 'ABCSans-Regular', Arial, sans-serif;
	border: 1px solid #fff;
	background-color: #000;
	color:#ffc600;
	text-align: center;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0px;
	cursor: pointer;
	-webkit-transition: all .5s;
    transition: all .5s;
	text-decoration: none;
	box-sizing: border-box;
	position: relative;
}

.footerNav a:hover {
	border: 1px solid #ffc600;
	background-color: #ffc600;
	color: #000;
	text-decoration: none;
}

.left {
	float: left;
	text-align: left !important;
	padding: 15px 15px 12px 45px;
    margin-right: 1%;
}

.right {
	float: right;
	text-align: right !important;
	padding: 15px 45px 12px 15px;
    margin-left: 1%;
}

<div class="footerNav-wrapper">
	<nav class="footerNav">
    	<a href="#" class="left">
        	<img src="images/arrow-left-white.png"  class="navArrow-left" alt="Previous page">
        	PREVIOUS PAGE NAME
        </a>
        <a href="c#" class="right">
            NEXT PAGE NAME - THIS IS AN EXTRA LONG NAME
            <img src="images/arrow-right-white.png"  class="navArrow-right" alt="Next page">
        </a>
        <div style="clear:both;"></div>
    </nav>
</div>