0

这是我想要完成的：

 _____________________________________________________________________________
|    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;
}

但是菜单栏会下降并且不会与图像重叠。知道如何设置吗？

4

1 回答 1

0

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/

如果你有意见，我很想听听。

于 2013-01-20T12:23:54.197 回答