如何用EJS和CSS实现每行3个博客内容的横向排列？

你的问题和EJS渲染逻辑无关，是HTML结构不合理加上CSS布局未正确作用到目标元素导致的。目前你的编辑、删除表单在<li>标签外部，每个博客项的结构被拆分，而且列表容器没有正确配置布局规则。

第一步：修正HTML结构 #

把编辑、删除表单放到<li class="blog-item">内部，保证每个博客项是一个独立的整体：

<div class="blogView">
  <ol class="blog-list">
    <% if (locals.listaBlogova) { %>
      <% listaBlogova.forEach(function (blog) { %>
        <li class="blog-item">
          <h1><%= blog.naslov %></h1>
          <h3>Autor: <%= blog.autor %></h3>
          <p><%= blog.tekst %></p>
          <div class="blog-actions">
            <form action="/edit/<%= blog.id %>" method="get">
              <input type="submit" value="EDIT" id="edit-<%= blog.id %>">
            </form>
            <form action="/delete/<%= blog.id %>" method="get">
              <input type="submit" value="DELETE" id="delete-<%= blog.id %>">
            </form>
          </div>
        </li>
      <%  }); %> 
    <% }; %> 
  </ol>
</div>

注：给表单的id加了前缀，避免id重复冲突；用<div class="blog-actions">包裹按钮，方便统一样式

第二步：添加CSS布局规则 #

给列表容器设置Grid布局，实现每行3个博客项：

.blog-list {
  list-style: none; /* 可选：去掉默认列表序号 */
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行3列，宽度均分 */
  gap: 20px; /* 博客项之间的间距，可调整 */
}

.blog-item {
  border: 1px solid #eee; /* 可选：添加边框区分项 */
  padding: 15px;
  border-radius: 8px;
}

.blog-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
}

.blog-actions form {
  margin: 0; /* 去掉表单默认外边距 */
}

如果想用Flex布局替代Grid，也可以这样写：

.blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.blog-item {
  flex: 0 0 calc(33.333% - 13.333px); /* 减去gap的占比，保证每行3个 */
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 8px;
}

关键说明 #

1. 布局失效的核心原因是之前的表单在<li>外，导致每个博客项不是一个完整的块级元素，布局规则无法正确分组。
2. Grid布局的repeat(3,1fr)是最简洁的每行3列实现方式，无需手动计算宽度；Flex布局需要用calc计算减去间距后的宽度。
3. 去掉列表默认的margin和padding，避免布局偏移。

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