Question

我在页面底部有一个导航。一切正常，除了一个小错误我想要它，我似乎无法找到解决方案......

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

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

关于我如何做到这一点的任何建议......？

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我在display:flex;上使用.footerNav并向左右各个类添加了保证金。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您需要支持真正的旧浏览器（http://caniuse.com/#search=flex），也可以使用display: table;和display: table-cell;来执行此操作。但是我会建议使用flexbox作为GvM指出。

有一篇有趣的文章介绍了你想做的事情：https://css-tricks.com/fluid-width-equal-height-columns/

.footerNav-wrapper {
	width: 100%;
	background-color: #000;
	padding: 35px 0;
	z-index: 9000;
	position: relative;
}

.footerNav {
    display: table;
	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 {
    display: table-cell;
	text-align: left !important;
	padding: 15px 15px 12px 45px;
}

.right {
    display: table-cell;
	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>
        <div style="display: table-cell; width: 2%;"></div>
        <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>
    </nav>
</div>

如何使浮动链接元素的父div的高度为100％

2 个答案: