2

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

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

在此处输入图像描述

4

2 回答 2

1

删除float内部h5并使用 控制它position，因为您已经relative为 parent 进行了定位Div，所以我建议使用absolute定位创建其中的元素，就像您对其余元素所做的那样。希望这可以帮助。

编辑

这是解决方案。

更新后的代码：

<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没有问题的影响，只是列表项对这些东西更有用。为您提供以列表项为垂直菜单的新解决方案。这就像一个进一步的参考，让您了解使用列表项创建菜单样式。希望这可以帮助。

  • 该资源在研究期间用于使用垂直菜单创建列表项。

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

于 2013-05-17T05:43:29.110 回答
0

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

于 2013-05-17T05:53:37.020 回答