我正在尝试显示由合并的文本和图像组成的垂直按钮列表。我正在使用 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>
组合按钮显示正常,但在父窗口中排列按钮似乎有问题。如上图所示,仅显示两个按钮之一。此外,该按钮会贴在现有窗口上,而不是“适合它”。我该如何解决?
最佳答案
去掉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在研究使用垂直菜单创建列表项的过程中使用了资源。
希望这能让您的工作更轻松。 :)
关于html - 显示包含位置 :relative and position:absolute 的按钮时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16602099/