如何让子DIV内的链接保持相同高度？

要让PREV和NEXT的链接高度统一，核心是让两个子容器高度对齐，并让链接元素撑满容器高度。以下是两种可行方案：

方案1：Flexbox布局（推荐） #

通过Flexbox实现父容器内子元素高度自动统一，同时让链接文本垂直居中，适配不同长度的内容：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.i3nextprev {
    display: flex;
    gap: 12px; /* 两个链接间的间距 */
    width: 100%;
}
.prev1, .next1 {
    flex: 1; /* 平分父容器宽度 */
}
.prev1{
    text-align: left;
}
.next1{
    text-align: right;
}
.i3nextprev a, .i3nextprev a:visited{
    color: #FFF;
    text-decoration: none;
    font-size: 95%;
    font-weight: 700;
    background-color: #006969;
    display: flex;
    align-items: center; /* 文本垂直居中 */
    padding: 10px; /* 扩大点击区域 */
    height: 100%; /* 撑满父容器高度 */
}
</style>
</head>
<body>
<h1>文章内容</h1>
<div class="i3nextprev">
    <div class="prev1">
        <a href="#">Python 多种列表操作示例程序</a>
    </div>
    <div class="next1">
        <a href="#">从给定列表中提取奇偶数字的Python实现</a>
    </div>
</div>
</body>
</html>

关键调整： #

• 父容器启用Flex布局，让两个子容器自动平分宽度且高度统一
• 链接元素用flex布局实现文本垂直居中，同时设置height:100%确保撑满容器

方案2：固定最小高度 #

如果不想使用Flexbox，可直接给链接设置固定最小高度，强制高度一致：

.i3nextprev a, .i3nextprev a:visited{
    /* 保留原有样式 */
    min-height: 60px; /* 根据文本长度调整合适值 */
    display: flex;
    align-items: center;
    padding: 10px;
}

此方法需手动适配文本长度，灵活性不如Flexbox。

内容的提问来源于stack exchange，提问作者SUDHIR SHARMA