如何在html-5 bsed主题中将侧边栏从左移到右?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (160)

我下载了一个基于HTML 5的主题。但我希望侧边栏站在骑行一边,下面是对应于页面边栏的HTML代码和CSS。

我尝试通过尝试代码将侧边栏移到右边,但是我做不到。

如果需要的话,我可以发布整个HTML代码。

#sidebar {
  margin-right: 3em;
  min-width: 22em;
  width: 22em;
  float: right;
}

#sidebar>* {
  border-top: solid 1px rgba(160, 160, 160, 0.3);
  margin: 3em 0 0 0;
  padding: 3em 0 0 0;
  float: right;
}

#sidebar> :first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  float: right;
}

@media screen and (max-width: 1280px) {
  #sidebar {
    border-top: solid 1px rgba(160, 160, 160, 0.3);
    margin: 3em 0 0 0;
    min-width: 0;
    padding: 3em 0 0 0;
    width: 100%;
    overflow-x: hidden;
    float: right;
  }
}

  <html>
 <head>
    <title>Future Imperfect by HTML5 UP</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user- 
  scalable=no" />
    <link rel="stylesheet" href="assets/css/main.css" />
 </head>
<body class="is-preload">

    <!-- Wrapper -->
        <div id="wrapper">


 <header id="header">
<h1><a href="index.html">Future Imperfect</a></h1>
<nav class="links">
    <ul>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Feugiat</a></li>
        <li><a href="#">Tempus</a></li>
        <li><a href="#">Adipiscing</a></li>
    </ul>
   </nav>
    <nav class="main">
    <ul>
        <li class="search">
            <a class="fa-search" href="#search">Search</a>
            <form id="search" method="get" action="#">
                <input type="text" name="query" placeholder="Search" />
           </form>
        </li>

        <li class="menu">
            <a class="fa-bars" href="#menu">Menu</a>
        </li>
    </ul>
 </nav>
  </header>

            <!-- Header -->

            <!-- Menu -->



      <section id="menu" float="right">

                    <!-- Search -->
                        <section>
                            <form class="search" method="get" action="#">
                                <input type="text" name="query" 
          placeholder="Search" />
                            </form>
                        </section>

                    <!-- Links -->
                        <section>
                            <ul class="links">
                                <li>
                                    <a href="#">
                                        <h3>Lorem ipsum</h3>
                                        <p>Feugiat tempus veroeros dolor</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>Dolor sit amet</h3>
                                        <p>Sed vitae justo condimentum</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>Feugiat veroeros</h3>
                                        <p>Phasellus sed ultricies mi 
               congue</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>Etiam sed consequat</h3>
                                        <p>Porta lectus amet ultricies</p>
                                    </a>
                                </li>
                            </ul>
                        </section>

                    <!-- Actions -->
                        <section>
                            <ul class="actions stacked">
                                <li><a href="#" class="button large fit">Log 
           In</a></li>
                            </ul>
                        </section>

                </section>

            <!-- Main -->
                <div id="main">

                    <!-- Post -->


                <!--    <!-- Post -->


                        <article class="post">
                            <header>
                                <div class="title">
                                    <h2><a href="single.html"><?php echo 
                   "$title"; ?> 
                                </div>
                                <div class="meta">
                                    <time class="published" datetime="2015- 
               10-25">October 25, 2015</time>
                                    <a href="#" class="author"><span 
                    class="name"><?php echo "$author" ;?></span><img 
              src="images/<?php echo "$image"; ?>" alt="" /></a>
                                </div>
                            </header>
                            <a href="single.html" class="image featured"><img 
                     src="images/pic02.jpg" alt="" /></a>
                            <p><?php echo "$content"; ?></p>
                            <footer>
                                <ul class="actions">
                                    <li><a href="single.html" class="button 
                    large">Continue Reading</a></li>
                                </ul>
                                <ul class="stats">
                                    <li><a href="#">General</a></li>
                                    <li><a href="#" class="icon fa- 
           heart">28</a></li>
                                    <li><a href="#" class="icon fa- 
                   comment">128</a></li>
                                </ul>
                            </footer>
                        </article>








                    <!-- Post -->


                    <!-- Pagination -->
                        <ul class="actions pagination">
                            <li><a href="" class="disabled button large 
              previous">Previous Page</a></li>
                            <li><a href="#" class="button large next">Next 
             Page</a></li>
                        </ul>

                </div>

            <!--sidebar-->

                    <!-- Posts List -->




                    <section id="sidebar">

                    <!-- Intro -->
                        <section id="intro">
                            <a href="#" class="logo"><img 
              src="images/logo.jpg" alt="" /></a>
                            <header>
                                <h2>Future Imperfect</h2>
                                <p>Another fine responsive site template by 
           <a href="http://html5up.net">HTML5 UP</a></p>
                            </header>
                        </section>

                    <!-- Mini Posts -->
                        <section>
                            <div class="mini-posts">

                                <!-- Mini Post -->
                                    <article class="mini-post">
                                        <header>
                                            <h3><a href="single.html">Vitae 
           sed condimentum</a></h3>
                                            <time class="published" 
           datetime="2015-10-20">October 20, 2015</time>
                                            <a href="#" class="author"><img 
           src="images/avatar.jpg" alt="" /></a>
                                        </header>
                                        <a href="single.html" class="image"> 
            <img src="images/pic04.jpg" alt="" /></a>
                                    </article>

                                <!-- Mini Post -->
                                    <article class="mini-post">
                                        <header>
                                            <h3><a href="single.html">Rutrum 
                   neque accumsan</a></h3>
                                            <time class="published" 
              datetime="2015-10-19">October 19, 2015</time>
                                            <a href="#" class="author"><img 
         src="images/avatar.jpg" alt="" /></a>
                                        </header>
                                        <a href="single.html" class="image"> 
        <img src="images/pic05.jpg" alt="" /></a>
                                    </article>

                                <!-- Mini Post -->
                                    <article class="mini-post">
                                        <header>
                                            <h3><a href="single.html">Odio 
                 congue mattis</a></h3>
                                            <time class="published" 
               datetime="2015-10-18">October 18, 2015</time>
                                            <a href="#" class="author"><img 
                 src="images/avatar.jpg" alt="" /></a>
                                        </header>
                                        <a href="single.html" class="image"> 
                 <img src="images/pic06.jpg" alt="" /></a>
                                    </article>

                                <!-- Mini Post -->
                                    <article class="mini-post">
                                        <header>
                                            <h3><a href="single.html">Enim 
               nisl veroeros</a></h3>
                                            <time class="published" 
             datetime="2015-10-17">October 17, 2015</time>
                                            <a href="#" class="author"><img 
            src="images/avatar.jpg" alt="" /></a>
                                        </header>
                                        <a href="single.html" class="image"> 
           <img src="images/pic07.jpg" alt="" /></a>
                                    </article>

                            </div>
                        </section>
                     <section>
                            <ul class="posts">
                                <li>
                                    <article>
                                        <header>
                                            <h3><a href="single.html">Lorem 
              ipsum fermentum ut nisl vitae</a></h3>
                                            <time class="published" 
             datetime="2015-10-20">October 20, 2015</time>
                                        </header>
                                        <a href="single.html" class="image"> 
               <img src="images/pic08.jpg" alt="" /></a>
                                    </article>
                                </li>
                                <li>
                                    <article>
                                        <header>
                                            <h3><a 
                 href="single.html">Convallis maximus nisl mattis nunc id 
     lorem</a></h3>
                                            <time class="published" 
               datetime="2015-10-15">October 15, 2015</time>
                                        </header>
                                        <a href="single.html" class="image"> 
               <img src="images/pic09.jpg" alt="" /></a>
                                    </article>
                                </li>
                                <li>
                                    <article>
                                        <header>
                                            <h3><a href="single.html">Euismod 
             amet placerat vivamus porttitor</a></h3>
                                            <time class="published" 
           datetime="2015-10-10">October 10, 2015</time>
                                        </header>
                                        <a href="single.html" class="image"> 
              <img src="images/pic10.jpg" alt="" /></a>
                                    </article>
                                </li>
                                <li>
                                    <article>
                                        <header>
                                            <h3><a href="single.html">Magna 
                    enim accumsan tortor cursus ultricies</a></h3>
                                            <time class="published" 
                   datetime="2015-10-08">October 8, 2015</time>
                                        </header>
                                        <a href="single.html" class="image"> 
                <img src="images/pic11.jpg" alt="" /></a>
                                    </article>
                                </li>
                                <li>
                                    <article>
                                        <header>
                                            <h3><a href="single.html">Congue 
                   ullam corper lorem ipsum dolor</a></h3>
                                            <time class="published" 
                datetime="2015-10-06">October 7, 2015</time>
                                        </header>
                                        <a href="single.html" class="image"> 
                <img src="images/pic12.jpg" alt="" /></a>
                                    </article>
                                </li>
                            </ul>
                        </section>

                    <!-- About -->
                        <section class="blurb">
                            <h2>About</h2>
                            <p>Mauris neque quam, fermentum ut nisl vitae, 
        convallis maximus nisl. Sed mattis nunc id lorem euismod amet 
      placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at 
         phasellus sed ultricies.</p>
                            <ul class="actions">
                                <li><a href="#" class="button">Learn More</a> 
             </li>
                            </ul>
                        </section>

                    <!-- Footer -->
                        <section id="footer">
                            <ul class="icons">
                                <li><a href="#" class="fa-twitter"><span 
               class="label">Twitter</span></a></li>
                                <li><a href="#" class="fa-facebook"><span 
         class="label">Facebook</span></a></li>
                                <li><a href="#" class="fa-instagram"><span 
            class="label">Instagram</span></a></li>
                                <li><a href="#" class="fa-rss"><span 
            class="label">RSS</span></a></li>
                                <li><a href="#" class="fa-envelope"><span 
                 class="label">Email</span></a></li>
                            </ul>
                            <p class="copyright">&copy; Untitled. Design: <a 
               href="http://html5up.net">HTML5 UP</a>. Images: <a 
                href="http://unsplash.com">Unsplash</a>.</p>
                        </section>

                </section>

        </div>

    <!-- Scripts -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/browser.min.js"></script>
        <script src="assets/js/breakpoints.min.js"></script>
        <script src="assets/js/util.js"></script>
        <script src="assets/js/main.js"></script>

</body>
             </html>
提问于
用户回答回答于

问题是你用float。因为你要把它应用到每个元素中#sidebar所有的东西都在向右漂浮,这导致了一些奇怪的事情发生。

相反,移除所有的float属性,并尝试如下:

#sidebar {
  margin-right: 3em;
  min-width: 22em;
  width: 22em;
  text-align: center;
}

#sidebar>* {
  border-top: solid 1px rgba(160, 160, 160, 0.3);
  margin: 3em 0 0 0;
  padding: 3em 0 0 0;
  padding-left: 800px;
}

我把float: right因为你不需要这两个声明,我补充说text-align: center#sidebar因为它会集中你的文字,我补充说padding-left: 600px,它将所有内容移动到页面的右侧。我使用你的HTML在浏览器中测试了它,它运行得很好。

扫码关注云+社区

领取腾讯云代金券