html - Easytabs - 将垂直选项卡面板容器 div 调整大小/重新定位到主 div 的中心

问题描述

伙计们：

我正在使用“easytabs”jQuery 插件在包含网页所有内容的主 div 的右边缘提供垂直选项卡。

我的CSS知识很差。我取得了很好的进展，但在实现最终目标的最后一步中停滞不前。

在过去的几个小时里，我一直在尝试重新定位和调整包含垂直选项卡内容 div - div1/div2/div3/div4 的面板容器 div 的大小，但到目前为止我还没有做到。

我想看看我是否可以从这个论坛上的专家那里得到一点帮助，以指出我错过了什么。

我希望面板容器 div 位于页面的中心。当我尝试为面板容器 div 指定宽度时，以像素为单位，垂直选项卡会变得混乱。

另外我想看看是否有人可以帮助我优化 CSS 中定义的垂直选项卡的文本方向和转换属性。我只能通过反复试验设法修复垂直标签的位置。我认为必须有一种更清洁的方式来做到这一点。

垂直标签条在 Firefox 中向左偏移约 2 个像素，但在 Microsoft Edge 中看起来不错。我怎样才能解决这个问题？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <link rel="stylesheet" type="text/css" href="./easytabs-vert.css" media="all">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="../jspkg-archive/vendor/jquery.hashchange.min.js" type="text/javascript"></script>
    <script src="../jspkg-archive/lib/jquery.easytabs.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(document).ready(function(){ 
            $('#tab-container').easytabs(); 
        });
    </script>

</head>

<body >
    <div style="width:1320px; height:928px; margin: 0 auto; border: 1px solid green">

        <div id="tab-container" class="tab-container" style="float:right; left:1321px">  

            <ul id="vertitab" class='etabs'  style="width:500px;">
                <li class='tab active'><a href="#div1">Requests</a></li>
                <li class='tab'><a href="#div2">Orders</a></li>
                <li class='tab'><a href="#div3">Payments</a></li>
                <li class='tab'><a href="#div4">Parts Lookup</a></li>          
            </ul>      

            <div class="panel-container" style="border: 1px solid blue"> 
                <div id="div1" > Tab 1 Content</div>
                <div id="div2" > Tab 2 Content</div>
                <div id="div3" > Tab 3 Content</div>
                <div id="div4" > Tab 4 Content</div>                
            </div>  

        </div>

    </div>

</body>

这是CSS：

.etabs { margin: 0; padding: 0; }

.tab { 
    display: inline-block; 
    zoom:1; 
    background: #eee; 
    border: solid 1px #999; 
    border-bottom: none; 
    -moz-border-radius: 4px 4px 0 0; 
    -webkit-border-radius: 4px 4px 0 0; 
}

.tab a { 
    font-size: 14px; 
    line-height: 2em; 
    display: block;
    padding: 0 10px; 
    outline: none; 
}

.tab a:hover { 
    text-decoration: underline; 
}

.tab.active { 
    background: #008000; 
    padding-top: 6px; 
    position: relative; 
    top: 1px; 
    border-color: #666; 
}

.tab a.active { 
    text-decoration: none;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
}

.tab-container .panel-container { 
    background: #fff; 
    border: solid #666 1px; 
    padding: 10px; 
    -moz-border-radius: 0 4px 4px 4px; 
    -webkit-border-radius: 0 4px 4px 4px; 
}

#vertitab {
   position: absolute;

   -webkit-transform-origin: 10% 271%;
      -moz-transform-origin: 10% 271%;
        -o-transform-origin: 10% 271%;
           transform-origin: 10% 271%;

   -webkit-transform: translate(-50%, 0) rotate(-90deg);
      -moz-transform: translate(-50%, 0) rotate(-90deg);
        -o-transform: translate(-50%, 0) rotate(-90deg);
           transform: translate(-50%, 0) rotate(-90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

     -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
}

这是 JSFiddle 的链接：https ://jsfiddle.net/ru03w5Ly/2/

谢谢和最好的问候

标签： htmljquerycss

html - Easytabs - 将垂直选项卡面板容器 div 调整大小/重新定位到主 div 的中心

问题描述

解决方案

推荐阅读