1

任何人都可以帮助我，我希望 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%;
}

查询：

$(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为中心。所以它应该在它的正下方。

4

2 回答 2

1 
 <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>
于 2013-05-29T09:11:46.837 回答
0 
#container div{
    display:block;
    height:auto;
    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;
    right: 0%;
}

#s-o1、#s-o2、#s-o3 怎么了？他们都有相同的风格。我在上面的代码中将它们全部删除，只添加了#container div。

于 2013-05-29T09:11:44.050 回答