1
我想中心我的facebook像按钮。它在一个div内，根据点击的菜单项显示/隐藏。当我点击显示div（并且隐藏其他人）的li（新闻和更新）时，点击后我的整个页面会移动。奇怪的是，当我在镀铬中“检查元素”时，它不会移位。您应该能够从窗口复制和粘贴代码并查看html（顶部横幅不会加载）。Facebook Like按钮转移整个页面居中显示在div
任何明显的CSS错误？在此先感谢
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chef's Classic - Knock OUT 'Bout</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
div {
display: block;
}
.tabs {
text-align:center;
}
.tabs ul {
display: inline-block;
margin: 0px;
padding: 0px 0px 10px 0px;
/* For IE, the outcast */
zoom:1;
*display: inline;
}
.tabs li {
list-style:none;
display:inline-block;
text-align:center;
}
.tabs a {
padding:5px 10px;
display:inline-block;
background-color:#000000;
color:#FFFFFF;
text-decoration:none;
width:150px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
-webkit-border-radius: 10px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 10px; /* FF1-3.6 */
border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
}
.tabs a:hover {
background-color:#D7181E;
}
.tabs a.active {
padding:5px 10px;
display:inline-block;
background-color:#666666;
color:#FFFFFF;
text-decoration:none;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
</style> </head>
<body style=" background-color:#666666">
<div id="fb-root"></div>
<div style="display:block; width: 800px; margin:0px auto; background-color:#FFFFFF; border-width: 50px 50px 50px 50px; -moz-border-image: url(images/main-border-oil-grey.png) 71 repeat; -webkit-border-image: url(images/main-border-oil-grey.png) 71 repeat; -o-border-image: url(images/main-border-oil-grey.png) 71 repeat; border-image: url(images/main-border-oil-grey.png) 71 repeat;">
<!--banner-->
<div style="text-align:center;">
<img height="250" src="images/banner.jpg" alt="Chef's Classic Knock Out Bout" />
</div>
<!--links-->
<div class="tabs" style="text-align:center">
<ul>
<li> <a href="#pages-about">About</a> </li>
<li> <a href="#pages-facebook">News & Updates</a> </li>
<li> <a href="#pages-tickets">Tickets</a> </li>
</ul>
</div>
<!--pages-->
<div id="pages-about" style="min-height:400px;">
</div>
<div id="pages-facebook" style="min-height:400px;">
<div class="fb-like-box" data-href="http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328"
data-width="550" data-height="600" data-show-faces="false" data-border-color="#D7181E"
data-stream="true" data-header="true"> </div>
<!--<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FChefs-Classic-Knock-OUT-Bout%2F225835004169328&width=550&height=427&colorscheme=light&show_faces=false&border_color=%23D7181E&stream=true&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:550px; height:427px;" allowTransparency="true">
</iframe>--> </div>
<div id="pages-tickets" style="min-height:400px;">
</div>
</div>
</body>
<script type="text/javascript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script> <script type="text/javascript">
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('.tabs ul').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// Use the first link as the initial active tab
$active = $links.first().addClass('active');
$content = $($active.attr('href'));
// Hide the remaining content
$links.not(':first').each(function() {
$($(this).attr('href')).hide(); //assumes href contains div name
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $($(this).attr('href'));
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
});
</script>
</html>
我注意到的一件事是'.tabs ul'行'* display：inline;'。看起来你在事故中添加了一个星号（*）。 – 2012-02-13 20:34:23
好赶上，不幸的是不是我正在寻找的哈哈:)，仍然是时髦的猴子和轮班。 – NickG 2012-02-13 23:03:57