如何在不罗列数组元素下标及使用<br>标签的情况下水平展示数组？

嘿，这事儿好办！咱们来把代码改得更简洁优雅，完全符合你的要求：不用挨个写数组下标，也不用<br>标签就能实现水平展示。

核心思路 #

原来的写法需要手动遍历每个数组下标，还得靠<br>控制换行，既繁琐又不灵活。我们可以利用数组的join()方法快速拼接元素，再结合CSS布局实现水平排列——如果需要更精细的样式控制，用map()给每个元素包裹标签就搞定了。

方案1：最简文本水平展示 #

如果只是需要把数组元素以文本形式水平排列，用join()直接拼接就行，默认就是水平的：

<div id="demo2"></div>

<script>
var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
// 用空格作为元素分隔符，你也可以换成逗号+空格(', ')之类的
document.getElementById("demo2").innerHTML = days.join(' ');
</script>

方案2：带样式的灵活水平布局 #

要是想给每个日期加样式、控制间距，用map()给每个元素包裹<span>，再用CSS Flex布局实现水平排列，这样扩展性更强：

<div id="demo2"></div>

<script>
var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
// 给每个日期包裹span标签，方便样式控制
document.getElementById("demo2").innerHTML = days.map(day => `<span class="day-item">${day}</span>`).join('');
</script>

<style>
/* 保留你原来的基础样式 */
body { margin: 0; padding: 0; }
table { border: 1px solid #000; border-collapse: collapse; width: 500px; height: 150px; margin: 5px; }
table tr td { border:1px solid #000; padding-left:10px; }

/* 新增水平布局样式 */
#demo2 {
  display: flex;
  gap: 15px; /* 控制每个日期之间的间距 */
  padding: 10px;
  margin: 5px;
}

.day-item {
  padding: 5px 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  border: 1px solid #ddd;
}
</style>

为什么这么改？ #

• 不用手动写days[0]、days[1]这种下标，数组长度变化时（比如新增/删除日期），代码完全不用改，维护性拉满；
• 抛弃<br>标签，用CSS控制布局更符合现代前端规范，样式调整也更灵活；
• map()+join()的组合是处理数组渲染的常用技巧，比硬编码高效太多。

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