Div元素无法同行显示？如何实现Div内容单行排列

内部元素无法同行的核心原因是<h3>标签默认是块级元素，渲染时会独占整行，和外层div的浮动设置没有关系。

Flex是当前实现横向排列最简便的方案，对齐控制简单，适配绝大多数现代浏览器，修改后的代码如下：

<div class="row">
@foreach (var item in Model)
{
    <div class="col-md-4 thumbnail" style="margin-left:30px;margin-bottom:30px; height:100px;border:solid;width:350px; display:flex; align-items:center; gap:24px; padding:0 16px;">
            <h3 style="margin:0;">@Html.DisplayFor(modelItem => item.id)</h3>
            <h3 style="margin:0;">@Html.DisplayFor(modelItem => item.name)</h3>
            @Html.ActionLink(" Show Result ", " Results ", new { sId = item.id }, new { @class = "btn btn-primary" });
    </div>
}
</div>

改动点说明 #

• 给内容容器加display: flex：强制容器内直接子元素默认按横向排列
• 加align-items: center：让id、名称、按钮在垂直方向居中，不会出现高低错位
• 加gap: 24px：统一控制三个元素之间的水平间距，无需单独给每个元素加外边距
• 去掉h3默认的上下外边距：浏览器默认给h3加了上下margin，会导致垂直方向对齐偏移，直接重置为0即可（Flex容器内的子元素不需要额外设置inline-block，默认就可以横向排列）
• 删除外层div多余的float: left：你使用的Bootstrap框架中col-md-4类本身已经内置了浮动属性，重复写浮动会干扰栅格布局
• 修正了ActionLink的参数传递：原代码中sId = Model.FirstOrDefault().id会导致所有条目按钮都跳转到第一个数据的结果页，改为item.id才能匹配当前循环的对应条目

如果需要兼容IE9及更早不支持Flex的浏览器，可以去掉容器的Flex相关属性，给所有内部子元素设置行内块属性实现同行，把以下样式写到公共CSS文件即可：

.thumbnail h3, .thumbnail .btn {
    display: inline-block;
    vertical-align: middle;
    margin: 0 12px 0 0;
}

这种方案需要手动调整元素的间距和垂直对齐，灵活度比Flex差。

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