Question

我正在我的网站（www.aaronvigal.com）上工作，我无法将菜单按钮对齐。我有一个白色的DIV，我希望我的菜单按钮坐在角落里。

DIV的宽度为80％，这让它变得艰难。实际的主体有一个列表，当命中菜单按钮时，div实际上看起来就像它上面的主体滑过，以显示列表（导航）。我是HTML / CSS的新手，所以如果你真的可以重新做代码而不是告诉我怎么做，那就太棒了！代码发布在下面，您可以在www.aaronvigal.com上看到我在说什么。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="stylesheets/style.css" type="text/css" rel="stylesheet" />
    <script src="/js/jquery-2.1.3.min.js" type="text/javascript"></script>
    <script src="/js/script.js"></script>
    <title>Home</title>
</head>
<body>
<ul class="navigation">
    <li class="nav-item"><a href="index.html">Home</a></li>
    <li class="nav-item"><a href="math.html">Math</a></li>
    <li class="nav-item"><a href="band.html">Band</a></li>
    <li class="nav-item"><a href="english.html">English</a></li>
    <li class="nav-item"><a href="about.html">About Me</a></li>
</ul>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>

<div class="site-wrap">
    <div class="bar"> </div>
    <div class="main">

    </div>
</div>
</body>

的CSS：

    body {
    overflow-x: hidden;
    margin: 0px;
    background-color: #333333;
}

.main{
    width: 80%;
    color: black;
    background-color: whitesmoke;
    height: 600px;
    margin: 23px auto 20px auto;
    border-radius: 3px;

}










.navigation {
    /* critical sizing and position styles */
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;

    /* non-critical appearance styles */
    list-style: none;
    background: dimgrey;
}

.nav-item {
    /* non-critical appearance styles */
    width: 200px;
    border-top: 1px solid dimgrey;
    border-bottom: 1px solid dimgrey;
}

.nav-item a {
    /* non-critical appearance styles */
    display: block;
    padding: 1em;
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(71,71,71,71) 100%);
    color: white;
    font-size: 1.2em;
    text-decoration: none;
    transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
    color: orangered;
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(253, 63, 5, 1) 100%);
    text-shadow: 1px 2px black;
}



/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
    /* Critical position and size styles */
    min-height: 100%;
    min-width: 100%;
    background-image: url("/images/1.jpg");
    background-size: cover;
    background-attachment: local;
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    bottom: 100%;
    left: 0;
    z-index: 1;
}

.site-wrap-about {
    /* Critical position and size styles */
    min-height: 100%;
    min-width: 100%;
    background-image: url("/images/2.jpg");
    background-size: cover;
    background-attachment: local;
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    bottom: 100%;
    left: 0;
    z-index: 1;
}

.site-wrap-band {
    /* Critical position and size styles */
    min-height: 100%;
    min-width: 100%;
    background-image: url("/images/3.jpg");
    background-size: cover;
    background-attachment: local;
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    bottom: 100%;
    left: 0;
    z-index: 1;
}

.site-wrap-english {
    /* Critical position and size styles */
    min-height: 100%;
    min-width: 100%;
    background-image: url("/images/4.jpg");
    background-size: cover;
    background-attachment: local;
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    bottom: 100%;
    left: 0;
    z-index: 1;
}

.site-wrap-math {
    /* Critical position and size styles */
    min-height: 100%;
    min-width: 100%;
    background-image: url("/images/5.jpg");
    background-size: cover;
    background-attachment: local;
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    bottom: 100%;
    left: 0;
    z-index: 1;
}

/* Nav Trigger */
.nav-trigger {
    /* critical styles - hide the checkbox input */
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
    /* critical positioning styles */
    position: fixed;
    right: 77%;
    top: 23px;
    z-index: 2;
    /* non-critical apperance styles */
    height: 48.5px;
    width: 120px;
    cursor: context-menu;
    background-image: url("/images/menu.png");
    background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
    transition: left 0.5s;
}
.nav-trigger + label, .site-wrap-about {
    transition: left 0.5s;
}
.nav-trigger + label, .site-wrap-band {
    transition: left 0.5s;
}
.nav-trigger + label, .site-wrap-english {
    transition: left 0.5s;
}
.nav-trigger + label, .site-wrap-math {
    transition: left 0.5s;
}


.nav-trigger:checked + label {
    left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
    left: 200px;
}
.nav-trigger:checked ~ .site-wrap-about {
    left: 200px;
}
.nav-trigger:checked ~ .site-wrap-band {
    left: 200px;
}
.nav-trigger:checked ~ .site-wrap-english {
    left: 200px;
}
.nav-trigger:checked ~ .site-wrap-math {
    left: 200px;
}


/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }
.bar{
    width: 100%;
    height: 3px;
    background-color: orangered;
}

Answer 1

这就是你要找的东西吗？

https://jsfiddle.net/xqenh54c/1/

我将按钮移到＆＃34; main＆＃34;：

<div class="site-wrap">
    <div class="bar"> </div>
    <div class="main">
        <label for="nav-trigger"></label>
    </div>
</div>

我在＆＃34; main＆＃34;：

中添加了相对位置

.main{
    position: relative;
}

并在按钮上将位置设置为绝对值：

label[for="nav-trigger"] {
    position: absolute;
    left: 0;
    top: 0;
}

因此，按钮的位置是绝对的，相对于＆＃34; main＆＃34;。

对齐css汉堡包菜单

1 个答案: