这是我想要完成的:
_____________________________________________________________________________
| option option option option |
|_____________________________________________________________________________|
| image | | image | | image | | image |
|_________| |_________| |_________| |_________|
在只有选项没有按钮的菜单栏中。另外,图像仅显示下半部分。我试过这个:
HTML
<div class="m_img"> <img src="image1.png" width="60px" height="30px"> </div>
<div class="m_img"> <img src="image2.png" width="60px" height="30px"> </div>
<div class="m_img"> <img src="image3.png" width="60px" height="30px"> </div>
<div class="m_img"> <img src="image4.png" width="60px" height="30px"> </div>
<div id="menu_bar" class="centered">
<a class="m_button" href="javascript:change(0)"> text0 </a>
<a class="m_button" href="javascript:change(1)"> text1 </a>
<a class="m_button" href="javascript:change(2)"> text2 </a>
<a class="m_button" href="javascript:change(3)"> text3 </a>
</div>
CSS
.m_img {
float: left;
width: 250px;
z-index: 1;
}
.m_button {
float: left;
width: 250px;
font-size: 110%;
z-index: 2;
}
但是菜单栏向下并且不与图像重叠。知道如何设置吗?
最佳答案
HTML:
<div style="width:400px; background-color: red; font-size:1em; height:1em">
<span class="menup option">option1</span>
<span class="menup option">option2</span>
<div style="z-index: -1; width: 100%; position:relative; top:-0.5em;">
<span class="menup">menu1</span>
<span class="menup">menu2</span>
</div>
</div>
CSS:
.menup { background-color: blue; width: 6em; display: inline-block; margin-left: 1em; margin-right: 1em; }
.option { background-color: green; }
参见 http://jsfiddle.net/mK4bJ/1/
如果您有任何意见,我很乐意听取。
关于html - 图像上的重叠 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14424412/