显示包含位置的按钮时出现问题：相对和位置：绝对

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

移除float中的h5，并使用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资源创建了使用垂直菜单创建列表项。

希望这会让您的工作更轻松。 ：）

Answer 2

将overflow:hidden应用于类well的div，以便按钮将适合该父div。