我目前有一个 2 栏的网站布局，有一个页脚/页眉，一个包含菜单的固定宽度的左侧栏，以及一个占据剩余可用空间的右侧栏。我的左侧栏包含一个折叠式菜单，当我在右侧栏中有选项卡时，所选选项卡中的文本似乎仅在我的左侧菜单结束后才开始。
我试过使用 clear:both;在选项卡开始之前导致整个选项卡向下移动，并在左侧菜单结束后开始。
这是我目前使用的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for FreeBSD (vers 1st August 2003), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.6/jquery-ui.min.js">
</script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#container{
margin: 0;
background-color: #FFF;
}
#header{
background-color: #666;
border-bottom: 1px solid #333;
}
#header h1{
margin: 0;
padding: .5em;
}
#nav{
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
}
#nav p { margin-top: 0; }
#content{
padding: 0;
margin: 0 0 0 180px;
}
#footer{
clear: both;
background-color: #666;
padding: 1em;
text-align: right;
border-top: 1px solid #333;
}
#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
}
.menu { margin: 10px; height: 100px; font-size: 8pt; font-family: verdana; }
.menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 125px; }
.menu li { background-color: #cccc99; float: left; }
.menu li.sub { background-color: #cccc99; }
.menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; }
.menu a, .menu a:visited { border: 1px solid #ffffff; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 125px; color: #000000; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; }
.menu b { float: right; margin-right: 5px; }
* html .menu a, * html .menu a:visited { width: 125px; }
* html .menu a:hover { color: #ccff66; background-color: #999966; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover { position: relative; }
.menu a:active, .menu a:focus { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover > a { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 7em; background-color: transparent; }
.menu li:hover > ul { visibility: visible; }
.menu ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
.footer
{
text-align: center;
font-family: Arial, sans-serif;
font-size: 11px;
color: #CCCCCC;
}
.ui-wrapper { border: 1px solid #383838; }
.ui-wrapper input, .ui-wrapper textarea { border: 0; }
.ui-tabs-hide {
display: none !important;
}
.ui-tabs-nav, .ui-tabs-panel {
font-family: Arial, sans-serif;
font-size: 13px;
color: #CCCCCC;
background-color: #242424;
}
.ui-tabs-panel a {
color: #FFD100;
cursor: pointer;
outline: none;
}
.ui-tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 3px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
.ui-tabs-nav li {
float: left;
margin: 0 0 0 2px;
}
.ui-tabs-nav a, .ui-tabs-nav a span {
color: #FFD100;
float: left; /* fixes dir=ltr problem and other quirks IE */
padding: 0 12px;
}
.ui-tabs-nav a {
margin: 5px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
padding-left: 0;
background-position: 100% 0;
text-decoration: none;
white-space: nowrap; /* @ IE 6 */
outline: 0; /* @ Firefox, prevent dotted border after click */
}
.ui-tabs-nav a:link, .ui-tabs-nav a:visited {
color: white;
}
.ui-tabs-nav .ui-tabs-selected a {
position: relative;
top: 1px;
z-index: 2;
margin-top: 0;
background-position: 100% -23px;
}
.ui-tabs-nav a span {
padding-top: 1px;
padding-right: 0;
height: 20px;
background-position: 0 0;
line-height: 20px;
}
.ui-tabs-nav .ui-tabs-selected a span {
color: white;
font-weight: bold;
padding-top: 0;
height: 27px;
background-position: 0 -23px;
line-height: 27px;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited,
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
.ui-tabs-disabled {
opacity: .4;
filter: alpha(opacity=40);
}
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {
color: #000;
}
.ui-tabs-panel {
padding: 10px;
background: #242424; /* declare background color for container to avoid distorted fonts in IE while fading */
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs > ul").tabs();} );
</script>
<title></title>
</head>
<body>
<div id="container">
<div id="header">
Header
</div>
<div id="nav">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page1</a></li>
<li><a href="#">Page2</a></li>
<li><a href="#">Page3</a></li>
<li><a href="#">Page4</a></li>
<li><a href="#">Page5</a></li>
<li><a href="#">Page6</a></li>
<li><a href="#">Page7</a></li>
<li><a href="#">Page8</a></li>
<li><a href="#">Page9</a></li>
<li><a href="#">Page10</a></li>
<li><a href="#">Page11</a></li>
<li><a href="#">Page12</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="main">
<h1>Main Body Here</h1><br>
<div id="tabs">
<ul>
<li><a href="#one"><span>One</span></a></li>
<li><a href="#two"><span>Two</span></a></li>
<li><a href="#three"><span>Three</span></a></li>
</ul>
<div id="one">
Tab One Here
</div>
<div id="two">
Tab Two Here
</div>
<div id="three">
Tab Three Here
</div>
</div>
</div>
</div>
<div id="footer" class="footer">
Footer
</div>
</div>
</body>
</html>
如有任何帮助，我们将不胜感激。谢谢。
注:Jquery 1.3，Jquery-ui 1.6
最佳答案
试试这个:
.ui-tabs-nav { height:2em; }
关于jquery - 在我的布局中使用 jquery 选项卡，我的选项卡在开始之前有很大的差距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/769891/