Question

任何人都可以帮助我，我希望div中的div与id =＆＃34; container＆＃34;以设置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%;
}

Jquery的：

$(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的容器。

编辑：对不起，我还不够清楚。它意味着以＆＃34;设置＆＃34; -div为中心。所以它应该在它之下。

Answer 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>

Answer 2

#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。

带有div的HTML和CSS

2 个答案: