如何将复选框放在右侧？

时间：2015-10-26 03:53:36

标签： html css

我遵循了一个非常棒的教程here，我完成了它。我想把菜单和复选框放在右侧，但我无法弄清楚如何。有没有聪明的开发人员有足够的时间来回答我的问题？提前谢谢！

PS - 告诉我，如果我的问题对我的情况太具体了，我会将其删除。抱歉给您带来不便。

PPS - 抱歉，我没有将所有图片和文字更改为样本：（

@import url(fontawesome/css/font-awesome.min.css);

#container {
    max-width: 90%;
    margin: 20px auto;
    font-size: 22px;
    line-height: 30px;
}

/* General Styles
===================================================*/
#container {
    width: 100%;
    overflow: hidden;
}

.content {
    width: 780px;
    margin: 100px auto;
    font-family: 'Slabo 27px', serif;
    font-size: 22px;
    line-height: 1.5;
}

.content h1 {
    font-size: 50px;
}


/* basic Menu Styles
===================================================*/
#menu {
    display: block;
    width: 300px;
    min-height: 100%;
    top: 0;
    z-index: 9999;
    position:fixed;
    background: #34495e;
    font-family: 'Slabo 27px', serif;
    color: #fff;
    -webkit-transition: left 2s;
    transition: left 2s;
}

#menu  .toggle {
    top: 90px;
    left: 300px;
    padding:10px;
    background-color: #2c3e50;
    color:#fff;
    position:absolute;
}

#menu span {
    display: block;
    font-size: 22px;
    margin: 20px 10px;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul li {
    font-size:19px;
    border-bottom: 1px solid #2c3e50;
}

#menu ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color:#fff;
}

#menu ul ul li {
    background-color: #2c3e50;
}

#menu ul li a:hover,
#menu ul ul li a {
    padding: 10px 10px 10px 30px;
}

#menu ul ul li a:hover {
    padding: 10px 10px 10px 60px;
}

#menu ul li a,
#menu ul li a:hover,
#menu ul ul li a,
#menu ul ul li a:hover {
    -webkit-transition: padding 0.5s; /* Safari 3.1 to 6.0 */
    transition: padding 0.5s;
}

/* Hiding and showing stuff
===================================================*/

/* Hiding the checkboxes so only the labels are visible */
#toggle,
input[id^="dropdown"],
ul[class^="dropdown"] {
    display: none;
}

/* Pushing the Menu off the canves */
#menu {
    left: -300px; /* must be the same as the width of the menu */
}

/* Showing the menu then the Checkbox is checked */
#toggle:checked + #menu {
    left: 0;
    -webkit-transition: left 1s; /* Safari 3.1 to 6.0 */
    transition: left 1s;
}

input[id^="dropdown"]:checked + ul[class^="dropdown"] {
    height: auto;
    display: block;
}

@media (min-width: 768px) {
    
    .tabs {
        max-width: 750px;
        margin: 50px auto;
    }

}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NatureBowl</title>
    
    <style>


    </style>
</head>

<body>
    

<input name="menu" value="toggle" id="toggle" type="checkbox">

    <!-- navigation menu container -->
    <section id="menu">
        
        <!-- Lable for #showmenu to hide the menu/uncheck the checkbox -->
        <label class="toggle" for="toggle"><i class="fa fa-2x fa-bars">Menu</i></label>

        <!-- Menu content -->
        <nav class="menuContent">

            <!-- Menu Section title -->
            <span>Menu</span>

            <!-- First Menu -->
            <ul>
                <li><a href="#"><i class="fa fa-home"></i>  Home</a></li>
                <li><a href="#"><i class="fa fa-picture-o"></i>  Portfolio</a></li>
                <li>

                    <!-- Second tier dropdown -->
                    <label for="dropdown-1" class="dropdown-1"><a><i class="fa fa-coffee"></i>  Blog <i style="float:right" class="fa fa-plus"></i></a></label>
                    <input name="menu" id="dropdown-1" type="checkbox">
                    <ul class="dropdown-1">
                        <li><a href="#"><i class="fa fa-code"></i>  Tutorials</a></li>
                        <li><a href="#"><i class="fa fa-eye"></i>  Inspiration</a></li>
                        <li>

                            <!-- Third tier dropdown -->
                            <label for="dropdown-2" class="dropdown-2"><a><i class="fa fa-folder-open"></i>  Resources <i style="float:right" class="fa fa-plus"></i></a>
                            <input name="menu" id="dropdown-2" type="checkbox">
                            <ul class="dropdown-2">
                                <li><a href="#"><i class="fa fa-folder-open-o"></i>  Free</a></li>
                                <li><a href="#"><i class="fa fa-folder-open-o"></i>  Premium</a></li>
                                <li>

                                    <!-- Third tier dropdown -->
                                    <label for="dropdown-3" class="dropdown-3"><a><i class="fa fa-folder-open"></i>  Other Stuff <i style="float:right" class="fa fa-plus"></i></a>
                                    <input name="menu" id="dropdown-3" type="checkbox">
                                    <ul class="dropdown-3">
                                        <li><a href="#"><i class="fa fa-folder-open-o"></i>  Stuff</a></li>
                                        <li><a href="#"><i class="fa fa-folder-open-o"></i>  More Stuff</a></li>
                                        <li><a href="#"><i class="fa fa-folder-open-o"></i>  Even More Stuff</a></li>
                                    </ul>

                                </label></li>
                            </ul>
                        </label></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-user"></i>  About</a></li>
                <li><a href="#"><i class="fa fa-envelope-o"></i>  Contact</a></li>
            </ul>
        </nav>
    </section>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

试试这个：

@import url(fontawesome/css/font-awesome.min.css);

#container {
    max-width: 90%;
    margin: 20px auto;
    font-size: 22px;
    line-height: 30px;
}

/* General Styles
===================================================*/
#container {
    width: 100%;
    overflow: hidden;
}

.content {
    width: 780px;
    margin: 100px auto;
    font-family: 'Slabo 27px', serif;
    font-size: 22px;
    line-height: 1.5;
}

.content h1 {
    font-size: 50px;
}


/* basic Menu Styles
===================================================*/
#menu {
    display: block;
    width: 300px;
    min-height: 100%;
    top: 0;
    z-index: 9999;
    position:fixed;
    background: #34495e;
    font-family: 'Slabo 27px', serif;
    color: #fff;
    -webkit-transition: left 2s;
    transition: right 2s;
}

#menu  .toggle {
    top: 90px;
    right: 300px;
    padding:10px;
    background-color: #2c3e50;
    color:#fff;
    position:absolute;
}

#menu span {
    display: block;
    font-size: 22px;
    margin: 20px 10px;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul li {
    font-size:19px;
    border-bottom: 1px solid #2c3e50;
}

#menu ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color:#fff;
}

#menu ul ul li {
    background-color: #2c3e50;
}

#menu ul li a:hover,
#menu ul ul li a {
    padding: 10px 10px 10px 30px;
}

#menu ul ul li a:hover {
    padding: 10px 10px 10px 60px;
}

#menu ul li a,
#menu ul li a:hover,
#menu ul ul li a,
#menu ul ul li a:hover {
    -webkit-transition: padding 0.5s; /* Safari 3.1 to 6.0 */
    transition: padding 0.5s;
}

/* Hiding and showing stuff
===================================================*/

/* Hiding the checkboxes so only the labels are visible */
#toggle,
input[id^="dropdown"],
ul[class^="dropdown"] {
    display: none;
}

/* Pushing the Menu off the canves */
#menu {
    right: -300px; /* must be the same as the width of the menu */
}

/* Showing the menu then the Checkbox is checked */
#toggle:checked + #menu {
    right: 0;
    -webkit-transition: right 1s; /* Safari 3.1 to 6.0 */
    transition: right 1s;
}

input[id^="dropdown"]:checked + ul[class^="dropdown"] {
    height: auto;
    display: block;
}

@media (min-width: 768px) {
    
    .tabs {
        max-width: 750px;
        margin: 50px auto;
    }

}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NatureBowl</title>
    
    <style>


    </style>
</head>

<body>
    

<input name="menu" value="toggle" id="toggle" type="checkbox">

    <!-- navigation menu container -->
    <section id="menu">
        
        <!-- Lable for #showmenu to hide the menu/uncheck the checkbox -->
        <label class="toggle" for="toggle"><i class="fa fa-2x fa-bars">Menu</i></label>

        <!-- Menu content -->
        <nav class="menuContent">

            <!-- Menu Section title -->
            <span>Menu</span>

            <!-- First Menu -->
            <ul>
                <li><a href="#"><i class="fa fa-home"></i>  Home</a></li>
                <li><a href="#"><i class="fa fa-picture-o"></i>  Portfolio</a></li>
                <li>

                    <!-- Second tier dropdown -->
                    <label for="dropdown-1" class="dropdown-1"><a><i class="fa fa-coffee"></i>  Blog <i style="float:right" class="fa fa-plus"></i></a></label>
                    <input name="menu" id="dropdown-1" type="checkbox">
                    <ul class="dropdown-1">
                        <li><a href="#"><i class="fa fa-code"></i>  Tutorials</a></li>
                        <li><a href="#"><i class="fa fa-eye"></i>  Inspiration</a></li>
                        <li>

                            <!-- Third tier dropdown -->
                            <label for="dropdown-2" class="dropdown-2"><a><i class="fa fa-folder-open"></i>  Resources <i style="float:right" class="fa fa-plus"></i></a>
                            <input name="menu" id="dropdown-2" type="checkbox">
                            <ul class="dropdown-2">
                                <li><a href="#"><i class="fa fa-folder-open-o"></i>  Free</a></li>
                                <li><a href="#"><i class="fa fa-folder-open-o"></i>  Premium</a></li>
                                <li>

                                    <!-- Third tier dropdown -->
                                    <label for="dropdown-3" class="dropdown-3"><a><i class="fa fa-folder-open"></i>  Other Stuff <i style="float:right" class="fa fa-plus"></i></a>
                                    <input name="menu" id="dropdown-3" type="checkbox">
                                    <ul class="dropdown-3">
                                        <li><a href="#"><i class="fa fa-folder-open-o"></i>  Stuff</a></li>
                                        <li><a href="#"><i class="fa fa-folder-open-o"></i>  More Stuff</a></li>
                                        <li><a href="#"><i class="fa fa-folder-open-o"></i>  Even More Stuff</a></li>
                                    </ul>

                                </label></li>
                            </ul>
                        </label></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-user"></i>  About</a></li>
                <li><a href="#"><i class="fa fa-envelope-o"></i>  Contact</a></li>
            </ul>
        </nav>
    </section>
</body>
</html>

我从左侧替换了菜单固定position:fixed：0（左：-300px）到右：0（右：-300px）（并相应地升级了转换属性）。

更多信息：

  1. Css position property
  2. Css transition property
相关问题
最新问题