任何人都可以帮助我，我想要 div 中的 id="container"在设置 div 下居中。
这是我的代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="menu">
<div class="option">Home</div>
<div class="option">Media</div>
<div class="option">link 3</div>
<div class="option">link 4</div>
<div class="option">link 5</div>
<div class="open"></div>
<div class="option" id="settings">Settings</div>
</div>
<div id="container">
<div id="s-o1">Account</div>
<div id="s-o2">Privacy</div>
<div id="s-o3">Logout </div>
</div>
</body>
</html>
CSS:
html {
background-image: url("carbon_background.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cgoogleover;
}
body,html {
height: 100%;
width: 100%;
padding: 0;
}
.menu {
margin-top: 0px;
height: 25px;
background-color: #3B5998;
margin-left: 0px;
margin-right: 0px;
border-radius: 0px;
margin-top: 0px;
width: 100%;
display: block;
top: 0px;
left: 0px;
margin-top: -8px;
margin-left: -8px;
}
.menu .option {
float: left;
width: 15%;
text-align: center;
background-color: #3B5998;
height: 25px;
border-radius: 0px;
color: white;
font-size: 20px;
text-decoration: none;
list-style-type: none;
}
.menu .open {
float: left;
width: 10%;
text-align: center;
background-color: #3B5998;
height: 25px;
border-radius: 0px;
text-decoration: none;
list-style-type: none;
}
#s-o1 {
list-style-type: none;
color: white;
margin-left: 85%;
background-color: #BBBBFF ;
opacity: 0;
width: 15%;
margin-top: 0px;
text-align: center;
font-size: 20px;
clear: both;
position: absolute;
right: 0%;
}
#s-o2 {
list-style-type: none;
color: white;
margin-left: 85%;
background-color: #BBBBFF ;
opacity: 0;
height: 5px;
width: 15%;
margin-top: 0px;
text-align: center;
font-size: 20px;
position: absolute;
right: 0%;
}
#s-o3 {
list-style-type: none;
color: white;
margin-left: 85%;
background-color: #BBBBFF ;
opacity: 0;
height: 5px;
width: 15%;
margin-top: 0px;
text-align: center;
font-size: 20px;
position: absolute;
right: 0%;
}
J查询:
$(document).ready(function() {
$(".menu .option").mouseenter(function() {
$(this).css("background-color", "#7894CC", "fast");
});
$(".menu .option").mouseleave(function() {
$(this).css("background-color", "#3B5998", "fast");
});
$("#settings").click(function () {
$("#s-o1, #s-o2, #s-o3").animate({opacity: 1});
});
$("#s-o1, #s-o2, #s-o3").mouseleave(function () {
$("#s-o1, #s-o2, #s-o3").animate({opacity: 0});
});
});
我希望在单击设置 div 时显示带有 div 的容器。
编辑: 对不起，我不够清楚。它旨在以“设置”-div 为中心。所以它应该就在它下面。
最佳答案
<style>
.menu {
margin-top: 0px;
height: 25px;
background-color: #3B5998;
margin-left: 0px;
margin-right: 0px;
border-radius: 0px;
margin-top: 0px;
width: 100%;
display: block;
top: 0px;
left: 0px;
margin-top: -8px;
margin-left: -8px;
}
.menu .option {
float: left;
width: 15%;
text-align: center;
background-color: #3B5998;
height: 25px;
border-radius: 0px;
color: white;
font-size: 20px;
text-decoration: none;
list-style-type: none;
}
.menu .open {
float: left;
width: 10%;
text-align: center;
background-color: #3B5998;
height: 25px;
border-radius: 0px;
text-decoration: none;
list-style-type: none;
}
#container div {
list-style-type: none;
color: white;
width:50%;
background-color: #BBBBFF ;
margin:0 auto;
}
</style>
在页面中
<div class="menu">
<div class="option">Home</div>
<div class="option">Media</div>
<div class="option">link 3</div>
<div class="option">link 4</div>
<div class="option">link 5</div>
<div class="open"></div>
<div class="option" id="settings">
<div>Settings</div>
<div id="container">
<div id="s-o1">Account</div>
<div id="s-o2">Privacy</div>
<div id="s-o3">Logout </div>
</div></div>
</div>
关于jquery - 带有 div 的 HTML 和 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16809560/