如何绘制一组索引的(x，y)对，使索引平行于x轴，但位于框架的顶部

<div id="frame"></div>

#frame {
  width: 500px;
  height: 200px;
  position: relative;
  border: 1px solid black;
}

#index {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#index li {
  display: inline-block;
  margin-right: 10px;
  padding: 5px;
  background-color: #ccc;
}

// 获取框架元素
var frame = document.getElementById("frame");

// 创建索引元素
var index = document.createElement("ul");
index.id = "index";

// 确定索引数量和间距
var indexCount = 5;
var indexSpacing = 50;

// 绘制索引
for (var i = 0; i < indexCount; i++) {
  var indexItem = document.createElement("li");
  indexItem.textContent = "(" + i + ", y)";
  indexItem.style.position = "absolute";
  indexItem.style.top = "0";
  indexItem.style.left = i * indexSpacing + "px";
  index.appendChild(indexItem);
}

// 将索引添加到框架中
frame.appendChild(index);