Javascript 定位这个部门是一个噩梦请协助
在这个JSFIDLE中，您可以看到这行代码Javascript 定位这个部门是一个噩梦请协助,javascript,jquery,html,css,division,Javascript,Jquery,Html,Css,Division,在这个JSFIDLE中，您可以看到这行代码 <div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div> 导致问题，因为它应该位于导航栏的正上方，同时仍然向右浮动，但当导航栏应位于该div下方并与收割台底部对齐时，它会从右侧将导航栏推出 当我说导航栏时，我实际上指的是下面所有的代码 <div style="float:right"
<div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div>
<div style="float:right"> <!-- This is the navigation menu -->
<div style="position:relative"> <!-- This is the container of the navigation menu -->
<div id="slider"></div> <!-- This is the slider bar -->
<a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a> <!-- This is just one of the buttons -->
<a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
<a href="apps.html"><div id="three" class="item"><div class="inside">Apps</div></div></a>
<a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
</div>
</div>
</div>
<!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>Untitled Document</title>
<link href="css/cssfile.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container"> <!-- This is the container -->
<div class="header"> <!-- This is the header -->
<div style="float:left"> <!-- This is the logo -->
<img src="images/mattsubishilogowhite.png" height="120px"/>
</div>
<div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div>
<div style="float:right; clear:both"> <!-- This is the navigation menu -->
<div style="position:relative"> <!-- This is the container of the navigation menu -->
<div id="slider"></div> <!-- This is the slider bar -->
<a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a> <!-- This is just one of the buttons -->
<a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
<a href="apps.html"><div id="three" class="item"><div class="inside">Apps</div></div></a>
<a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
</div>
</div>
</div>
<div class="body"> <!-- This is the body -->
</div>
<div class="footer"> <!-- This is the footer -->
</div>
</div>
</body>
</html>
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#slider").animate({
"left": $(".item:first").position().left + "px",
"width": $(".item:first").width() + "px"
}, 0);
$(".item").hover(function() {
$("#slider").stop();
$("#slider").animate({
"left": $(this).position().left + "px",
"width": $(this).width() + "px"
}, 500);
});
$(".item").on("mouseout", function() {
$("#slider").stop();
$("#slider").animate({
"left": $('#one').position().left + "px",
"width": $('#one').width() + "px"
}, 500);
});
});
</script>
<script>
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isAtLeastIE11 = !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/));
if(isChrome){
alert("Your using Chrome, please be aware that using Chrome will reduce some functionality of this website therefore you should use Internet Explorer version 11 or higher.");
}else{
if(!isAtLeastIE11){
alert("Your version of Internet Explorer is below 11. It needs to be 11 or higher for some aspects of this website's functionality to work. Please update or use Chrome.");
}
}
</script>
如果您希望它位于导航栏顶部，请使用类似“位置：固定”或“位置：绝对”的选项。1。把你问题的全部内容放在你的问题中，不要只是链接到它。您可以并且应该使用站点上的工具栏按钮创建可运行的堆栈代码段。2.请不要大声喊叫。3.你在结尾大声喊叫的话完全不是你应该如何警告人们的。在它绊倒你之前，请注意，导航栏布局很容易被重新定位该div而弄乱，最好是包含更多相关信息。记住，你要求人们花时间帮助你。请尊重这一点。请明确：导航菜单上的两个位置：我要找的不是问题中明确列出的固定位置。位置：绝对不会产生期望的结果@gcampbell你能澄清一下你在导航栏正上方仍然向右浮动的意思吗？现在就测试一下@hosseinmaktoobian当我把我的徽标放回那一行时，它毁了它，因为在我把图像放回divi之前它正在工作。我将用一个徽标的图像更新代码片段谢谢！！！：欢迎光临。现在看看这个