Html 按钮的位置，使其不会'；不要在页面上往下推

请分别运行每个代码段，并注意按钮是如何在无序的项目列表下方按下的。这些代码片段之间的唯一区别是列表项的数量。如果有许多项目，按钮将在页面的下方结束。是否有办法使按钮显示在“路径内容：”标签下，而不管出现多少列表项

ul
{
列表样式类型：无；
显示：内联块；
垂直对齐：顶部；
左侧填充：0px；
}
按钮
{
显示：块；
边缘底部：10px；
}
标签
{
显示：内联块；
宽度：150px；
}

路径内容：

项目1
项目2

跑
清除

您可以使用css position属性设置为fixed来执行此操作

.myclass{
   position: fixed;
}

---

希望它能帮助你

您可以使用css position属性设置为fixed来执行此操作

.myclass{
   position: fixed;
}

---

希望它能帮助你

只需将按钮移到右上角即可

<div>
  <label id="pathcontentsLbl">path contents:</label>

  <button id="Run">Run</button>
  <button id="Clear">Clear</button>
  <span id="PathContents">
          <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
            <li>item 9</li>
          </ul>
        </span>
</div>

---

把按钮移到右上角好吗

<div>
  <label id="pathcontentsLbl">path contents:</label>

  <button id="Run">Run</button>
  <button id="Clear">Clear</button>
  <span id="PathContents">
          <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
            <li>item 9</li>
          </ul>
        </span>
</div>

---

下面是我发现的解决这个问题的方法。诀窍是使用外部容器（class=“container”）和内部容器（class=“buttons”），并在CSS中使用“position”属性和“top”属性

ul
{
列表样式类型：无；
显示：内联块；
垂直对齐：顶部；
左侧填充：0px；
}
按钮
{
显示：块；
边缘底部：10px；
}
标签
{
显示：内联块；
宽度：150px；
}
.集装箱
{
位置：相对位置；
}
.按钮
{
位置：绝对位置；
顶部：25px；
}

路径内容：

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9

跑
清楚的

以下是我发现的解决此问题的方法。诀窍是使用外部容器（class=“container”）和内部容器（class=“buttons”），并在CSS中使用“position”属性和“top”属性

ul
{
列表样式类型：无；
显示：内联块；
垂直对齐：顶部；
左侧填充：0px；
}
按钮
{
显示：块；
边缘底部：10px；
}
标签
{
显示：内联块；
宽度：150px；
}
.集装箱
{
位置：相对位置；
}
.按钮
{
位置：绝对位置；
顶部：25px；
}

路径内容：

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9

跑
清楚的

我试图使按钮显示在路径内容标签下，无序列表项的左侧。我试图使按钮显示在路径内容标签下，无序列表项的左侧。