为何设置display:inline-block的两个<a>标签未同行显示？

核心原因 #

你设置了display: inline-block的两个a标签之所以不在同一行，是因为每个a标签的宽度由内部文本内容撑开，两者总宽度超过了父容器（body）的可用宽度，导致第二个元素被挤到下一行。

inline-block元素的特性是会在同一行排列，但前提是它们的总宽度（包含内容、内边距、边框、外边距）不超出父容器的宽度范围。你的每个a标签内的文本内容较长，默认情况下会占据尽可能多的横向空间，两个元素的宽度总和超过了body的宽度，因此触发换行。

解决方案 #

可以通过以下几种方式解决：

1. 给a标签设置固定宽度 #

直接指定a标签的宽度，确保两者总宽度不超过父容器：

a {
    display: inline-block;
    width: 48%; /* 留少量间距避免溢出 */
    word-wrap: break-word; /* 让长文本自动换行 */
    margin-right: 1%;
}

2. 使用Flex布局 #

给父容器（body）设置flex布局，让两个a标签自动分配可用空间：

body {
    display: flex;
    gap: 15px; /* 可选，添加元素间的间距 */
}
a {
    display: inline-block;
    word-wrap: break-word;
    flex: 1; /* 让两个a标签平分父容器宽度 */
}

3. 限制文本宽度并强制换行 #

如果不想设置固定宽度，可通过文本换行来缩小单个a标签的宽度：

a {
    display: inline-block;
    max-width: calc(50% - 10px); /* 计算最大宽度，留出间距 */
    word-wrap: break-word;
}

修改后的示例代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            display: flex;
            gap: 10px;
            padding: 0 10px;
        }
        a {
            display: inline-block;
            word-wrap: break-word;
            flex: 1;
            border: 1px solid #ccc; /* 可选，方便查看元素范围 */
            padding: 8px;
        }
    </style>
</head>
<body>
    <a href="">Lorem ipsum, dolor sit amet consectetur adipisicing 
    elit. Magnam, quam.
        Inventore nihil, quod eos
        porro neque sed ducimus ipsam soluta maiores et maxime harum dolorum unde culpa cupiditate 
    sapiente quia
        quaerat omnis laboriosam, doloribus est.</a>
    <a href="">Lorem ipsum, dolor sit amet consectetur adipisicing 
    elit. Magnam, quam.
        Inventore nihil, quod eos
        porro neque sed ducimus ipsam soluta maiores et maxime harum dolorum unde culpa cupiditate 
    sapiente quia
        quaerat omnis laboriosam, doloribus est.</a>
</body>
</html>

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