Question

我正在asp.net中制作一些自定义标签。我也在使用jquery，但是我重写了默认的tab选项。我遇到了一个小问题，其中我在无序列表后面放置的div（＃右侧）在与选项卡相关的信息之后进一步显示。

请看下图：

enter image description here

在＃left-side 中，我有菜单的左侧曲线部分，然后在 .tab-menu 中，我有一个重复的1像素图片，最后在< strong>＃right-side 我的菜单中有正确的曲线部分但是向下，朝保存按钮的左侧显示。

在实际＃右侧中制作图片的任何想法都会显示在＃右侧（应该出现）位置。

由于

这是我的代码：

html

<div id="tabs">
    <div id="left-side">
    </div>
    <ul class="tab-menu">
            <li><a href="<%= Url.Action("GetHomeTab", "Home") %>" class="a"><b>
                <div id="home" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetProductTab", "Home") %>" class="a"><b>
                <div id="dates-and-location" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetContactUsTab", "Home") %>" class="a"><b>
                <div id="tariff" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetHomeTab", "Home") %>" class="a"><b>

            <div id="customer-information" class="menu">
            </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetContactUsTab", "Home") %>" class="a"><b>
                <div id="rates-and-charges" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetProductTab", "Home") %>" class="a"><b>
                <div id="payments-and-vouchers" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetProductTab", "Home") %>" class="a"><b>
                <div id="delivery-and-collection" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetContactUsTab", "Home") %>" class="a"><b>
                <div id="general" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetProductTab", "Home") %>" class="a"><b>
                <div id="equipment-and-other-drivers" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetProductTab", "Home") %>" class="a"><b>
                <div id="vehicle-information" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetContactUsTab", "Home") %>" class="a"><b>
                <div id="customer-preferences" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetProductTab", "Home") %>" class="a"><b>
                <div id="customer-statistics" class="menu">
                </div>
            </b></a></li>      

    </ul>
    <div id="right-side">
            </div>
</div>

＃right-side的相关css

#tabs #right-side
{
background-image: url('../Content/images/right_side.png');
background-repeat: no-repeat;
background-position: right 8px;
height: 50px;
width: 7px;
float: left;
}

Answer 1

请查看：Formatting DIVs

如果您觉得不合适，请纠正我。

谢谢。

下面，

InnerDiv1 =＃left-side
  InnerDiv2 =＃右侧
  InnerDiv3 = .tab-menu

Answer 2

好的伙计们，我只对这个＃右侧 div使用绝对定位。下面显示的是我使用过的CSS：

#tabs #right-side
{
background-image: url('../Content/images/right_side.png');
background-repeat: no-repeat;
background-position: right 8px;
position:absolute;
height: 50px;
width: 7px;
float: left;
top: 3px;
left: 670px;
}

感谢阅读： - ）

我的div在asp.net mvc2应用程序的选项卡菜单中更进一步

2 个答案: