使用jQuery卡口与我的布局我的标签有巨大的差距，才开始
https://stackoverflow.com/questions/769891
-
12-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我现在有一个2列站点布局，具有页脚/报头，一个固定的宽度左列包含一个菜单，和右手列这需要的可用空间的其余部分。我的左手列包含一张折叠菜单，看来，当我在右侧列选项卡，选择选项卡中的文本只是我lefhand菜单的末尾结束后开始。
我已经使用透明尝试：两者;前翼片开始引起整个标签来向下移动，并开始菜单lefhand结束后。
下面是我目前使用的代码：
<!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>
任何帮助，将apperciated。感谢。
注意：Jquery的1.3，jQuery的UI 1.6
解决方案
尝试这种情况：
.ui-tabs-nav { height:2em; }
其他提示
结算，默认情况下，应用于全球范围相当。那是什么导致你看到的错误 - 在#nav进来内容的选项之前，这样明确的：既会清除它（你实际上是用明确的：无论在.tabs ::之后，但同样的差异）
在以“包含”明确，并保持它与从在页面别处元素交互时，需要浮在容器为好。在这种情况下，这将是div.content。添加浮动：左向，宽度：100％，使其伸展的div＃主的宽度，你会得到所期望的行为 - 标签卡将立即在标签下自己
（这是一个原因，顺便说一下，该“浮动几乎所有”的战略工程，以及它 - 在一个健全的方式，尽管大量过度使用浮点数，仍然可以使用全部清除）
回复：
编辑而回来时，我开始使用 jQuery的UI，与附带的CSS 下载是造成我压延 呈现在150％的大小，我 期望他们。通过他们的网站， 我不得不改变字体大小和 填充到CSS，然后 重新下载了这一切。如果间隙 关，听起来可能有些 填充左施加某处。
最初我有同样的问题，但改变ui.tabs.css象下面的工作：
的.ui袢{填充：.2em;缩放：1;的字体大小：80％重要; }
！不隶属于 StackOverflow
