Question

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

以下是我想要播放的区域的屏幕截图。左侧的菜单是TabContainer的选项卡。右侧是标签的内容。我想让“更新PCR”按钮位于“受影响的学科”的正下方。问题是左侧和右侧是ONE块的一部分，即TabContainer。

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

Screenshot

编辑：

这是现有的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为Vertical而不是Horizontal。我知道，有一个属性.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;
        }

Answer 1

您需要将按钮的顶部相对于标签元素的底部放置。这可以用jquery完成。见How to position one element relative to another with jQuery?

Answer 2

这会有点受欢迎，但尝试一下以下几点：

.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，我已经完全忘记了这一点，因为它是我的一个旧的经典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业务。

亲切的问候，西部高地白梗。

将按钮对齐到顶部

2 个答案: