Question

我希望手风琴拉伸到网页的宽度，并且标签能够在彼此之上堆叠而没有空间。我必须使用图像作为标签。

这是标签/按钮关闭时主页的外观：i.imgur.com/aJMDepQ.png

当它们在实际网页中关闭时，它们不会一直拉到边缘而不会触摸

这是其中一个手风琴标签实际上的样子：http://i.imgur.com/NpzCkzp.png

HTML：

<!DOCTYPE html>

    <head>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <title>Jennifer Wexler's Portfolio Site</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
    </head> 
    <body>
        <div id="container">
                <div id="logo">
                    <center><img src="images/logo.png"></center>
                </div>
                <div id="nav">
                    <ul>
                        <li><a class="nav", href="index_homepage.html">work</a></li>
                        <li><a class="nav", href="http://www.google.com">resume</a></li>
                        <li><a class="nav", href="http://www.google.com">contact</a></li>
                    </ul>
                </div>  
                        <!--the code player practice. Issues with being the width of the site, but hover state is still working.-->
                        <div id="accordian">
                            <ul>
                                <li>
                                        <img class="fs_button", src="images/fashion_spread.jpg" onmouseover="this.src='images/fashion_spread_hover.jpg'" onmouseout="this.src='images/fashion_spread.jpg'">
                                    <ul>
                                        <li><img class="fashionspread", src="images/fs_1.jpg"></li>
                                        <li><p>
                        A surreal fashion spread taking place in front of a theatre from the 1940s. It tells the story of a girl longing to be in the limelight. Original photography, styling, and experimental typography.</p></li>
                                    </ul>
                                </li>
                               </ul>
                           </div>
                </div>
        </div>


    </body>

</html>

的CSS：

html {
    font-family:Didot;
    margin:0px;
    padding:0px;
  background:#FDF9F0;
}

body {
    margin-left:auto;
    margin-right:auto;
}

#container {
    margin-left:auto;
    margin-right:auto;
    width:100%;
}

#logo {
    margin-left:auto;
    margin-right:auto;
    width:100%;
}

#nav {
    margin-left:auto;
    margin-right:auto;
    top:0px;
    width:50%;
    font-family:Didot;
    font-size:15px;
}

#nav ul { 
    list-style-type: none; 
    text-align: center; 
    padding-top:145px;
    padding-bottom:145px;
}

#nav ul li {  
    display: inline; 
    padding-left:30px;
    padding-right:30px;
} 

.nav: hover {
    border-color:#000;
    border-width:thin;
}

.nav:link {
    color:#000000;
    text-decoration:none;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:6px;
    padding-right:6px;
} 

.nav:visited {
    color:#000000;
    text-decoration:none;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:6px;
    padding-right:6px;
} 
.nav:hover {
    color:#98b7a8;
    text-decoration:none;
    border-color:#000000;
    border-width:1px;
    border-style:solid;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    padding-right:5px;
    }  
.nav:active {color:#000000;}

#work {
    margin-left:0px;
    margin-right:0px;
    width:100%;
}


.work {
    margin-left:0px;
    margin-right:0px;
    width:100%;
    height:auto;
    display:block;
}


/*the code player practice*/

#accordian {
    width: 100%;
    padding: none;
    alignment-adjust:central;
}

/*list items*/
#accordian li {
    list-style-type: none;
}
/*links*/
#accordian ul ul li a {
    display: block;
    /*transition for smooth hover animation*/
    transition: all 0.15s;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
    display: none;
    width: auto;
}
#accordian li.active ul {
    display: block;
}

jquery的：

/*jQuery time*/
$(document).ready(function(){
    $(".fs_button").click(function(){
        //slide up all the link lists
        $("#accordian ul ul").slideUp();
        //slide down the link list below the h3 clicked - only if its closed
        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
        }
    })
})

谢谢！

jquery手风琴宽度，缩放和对齐问题

0 个答案: