0

我正在使用一些 AJAX 功能在 .net 中构建 webapp；在这种情况下，它是 TabContainer。

下面是我想玩的区域的截图。左侧的菜单是 TabContainer 的选项卡。右侧是标签的内容。我希望“更新 PCR”按钮位于“受影响的学科”下方。问题是左右两边是ONE块的一部分，也就是TabContainer。

对于如何格式化按钮的 CSS 以在 TabContainer 的菜单下方对齐是否有任何建议？我可以将按钮添加为菜单的一部分，但是，然后我必须将控件设置为 AutoPostback，这首先在这种情况下破坏了它的目的......任何建议将不胜感激！

截屏

编辑：

这是现有的 CSS

.ajax_tabController .ajax__tab_tab
{
    background-color: #3c6f91;
    padding: 5px;
    border: 1px solid #ffffff;
    color:#ffffff;
    border-left: 3px solid #5AB0DB;
}

.ajax_tabController .ajax__tab_hover .ajax__tab_tab
{
    background-color:#5AB0DB;
    text-decoration:none;
}

.ajax_tabController .ajax__tab_active .ajax__tab_tab
{
    background-color:#5AB0DB;
    text-decoration: underline;
}

此外，还有一些 CSS 会覆盖一些设置以使 TabContainer 垂直而不是水平。我知道，有一个属性 .UseVerticalStripPlacement 但它与控件的高度混淆并引发 JavaScript 错误。

.ajax__tab_header
        {
            float: left;
        }
        .ajax__tab_body
        {
            margin-left: 160px;
        }
        .ajax__tab_outer
        {
            display: block !important;
        }
        .ajax__tab_tab
        {
            width: 210px;
            height: auto !important;
        }
4

2 回答 2

2

您需要相对于选项卡元素的底部定位按钮的顶部。这可以用 jquery 来完成。请参阅如何使用 jQuery 相对于另一个元素定位一个元素？

于 2013-02-23T00:32:30.000 回答
1

这会有点失败，但请尝试以下方式：

.updatePcrButton {
    position: absolute;
    top: 100px;   /* These will be whatever the measurement is to */
    left: 5px;    /* be directly under the last element */
    z-index: 99;  /* Arbitrary amount to put it above any other elements */
}

老实说，这非常混乱 - 它依赖于您此后不更改控件的位置。

也许更好的方法是添加一个额外的选项卡TabContainer并自己处理任何选项卡点击。

-- 编辑 -- 可能更有用 --

Nikita，我完全忘记了这一点，因为它是在我的一个旧的 Classic ASP 应用程序中，但你可以尝试这两个可能对你更有用的 JS 函数：

function curTop(obj){
rv = 0;
while(obj) {
    rv += obj.offsetTop;
    obj = obj.offsetParent;
}
return rv;
}
function curLeft(obj){
rv = 0;
while(obj) {
    rv += obj.offsetLeft;
    obj = obj.offsetParent;
}
return rv;
}

他们从指定的对象中拉出位置。如果您添加要放置在下方的按钮的高度，那么您可能会发现这会改善您的位置并防止使用 CSS 进行任何有趣的业务。

亲切的问候，韦斯蒂。

于 2013-02-22T22:36:38.567 回答