显示包含 position:relative 和 position:absolute 的按钮时出现问题答案

【问题标题】：Problems displaying buttons containing position:relative and position:absolute显示包含 position:relative 和 position:absolute 的按钮时出现问题
【发布时间】：2013-05-12 05:05:13
【问题描述】：

我正在尝试显示由合并的文本和图像组成的按钮的垂直列表。我正在使用 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>

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

【问题讨论】：

为此提供一个 Fiddle 代码，其中包含您的图像、CSS 和 Jscript 代码的问题部分。

标签： html image button text

【解决方案1】：

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

编辑

这里是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 资源创建带有垂直菜单的列表项。

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

【讨论】：

这样做了，但最终效果还是一样的：只有第二个按钮是可见的。更新了 jsfiddle 中的代码jsfiddle.net/tromanow/faRk7
如果您对答案感到满意，您可以通过绿色勾号接受并投票，如果不满意，请让我知道相同的查询/问题。 - @Ya。
感谢您的尝试。不幸的是，它不会产生预期的结果。第一个按钮显示正确，第二个按钮大小约为我真的不明白的四分之一。井 div 的大小也没有正确调整。
最终我让它看起来像我想要的jsfiddle.net/tromanow/WVL5n，但我希望有一种更简单的方法，将按钮显示在彼此下方并自动适应井而无需我计算宽度和坐标。赞成你给我一个提示。
感谢您的支持。但我渴望越来越多，因为我喜欢 CSS ;) - @Ya。再来一个提示。请在更新后的答案中找到 EDIT - 2。希望这会有所帮助。

【解决方案2】：

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

【讨论】：

它所做的只是砍掉不适合的部分。