html - 显示包含位置 :relative and position:absolute 的按钮时出现问题

Question

我正在尝试显示由合并的文本和图像组成的垂直按钮列表。我正在使用 position:relative 和 position:absolute 将文本与图像合并。

<div class="well">
  <div style="position:relative;">
    <img src="assets/launch_item.png" style="position:absolute;"/>
      <div style="position:absolute;padding: 16px 0px 0px 55px;">
       <h5 style="float:left;width:300px;">Option1</h5>
        <a href="http://localhost:3000" style="padding: 0px 0px 0px 0px;"><div class="btn btn-success">Go</div></a>
      </div>
  </div>
  <div style="position:relative">
    <img src="assets/launch_item.png" style=position:absolute;"/>
    <div style="position:absolute;padding: 16px 0px 0px 55px;">
      <h5 style="float:left;width:300px;">Option2</h5>
      <a href="http://localhost:3000" style="padding: 0px 0px 0px 0px;"><div class="btn btn-success">Go</div></a>
    </div>
  </div>
</div>

组合按钮显示正常，但在父窗口中排列按钮似乎有问题。如上图所示，仅显示两个按钮之一。此外，该按钮会贴在现有窗口上，而不是“适合它”。我该如何解决？

Answer 1

去掉h5里面的float，用position控制它，因为你已经做了一个relative 为父 Div 定位，所以我建议使用 absolute 定位在其中创建元素，就像您为其余元素所做的一样。希望这会有所帮助。

编辑

这是 Solution .

更新后的代码:

<div class="well" style="position:relative;">
  <div style="width:300px;">
    <img src="assets/launch_item.png" style="position:absolute;"/>
    <div style="position:absolute;padding: 8px 0px 0px 55px;">
      <h5 style="width:300px;position:absolute;">Option1</h5>
        <a href="http://localhost:3000" style="padding: 0px 0px 0px 250px;position:absolute"><div class="btn btn-success">Go</div></a>
    </div>
  </div>
  <div style="width:300px; left:305px; top:0; position:absolute;">
    <img src="assets/launch_item.png" style="position:absolute;"/>
    <div style="position:absolute;padding: 8px 0px 0px 55px;">
      <h5 style="width:300px;position:absolute;">Option2</h5>
        <a href="http://localhost:3000" style="padding: 0px 0px 0px 250px;position:absolute"><div class="btn btn-success">Go</div></a>
    </div>
  </div>
</div>

希望这对您有所帮助。

编辑 - 2

通常对于菜单，UL 和LI 起着至关重要的作用。考虑到带有 position 的代码没有问题，只是列表项对这些东西更有用。为您提供new solution with list items as vertical menu .这就像一个进一步的引用，让您了解使用列表项创建菜单样式。希望这会有所帮助。

• This在研究使用垂直菜单创建列表项的过程中使用了资源。

希望这能让您的工作更轻松。 :)