堆栈内存溢出
  繁体   English   中英

CSS将边栏内容向左移动

[英]Css move Sidebar content to the left

 原文  2017-03-22 16:29:22  7   2    html/ css3

问题描述

我有以下html： 

<!DOCTYPE html>
<html lang="el" >
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="pingback" href="/pages/wordpress/xmlrpc.php">

    <title>  Δείγμα σελίδας</title>

    <link rel="icon" type="image/x-icon" href="/pages/wordpress/wp-content/themes/testTheme.php/favicon.ico">



    <link rel="stylesheet" href="/pages/wordpress/wp-content/themes/testTheme.php/style.css">
    <meta name='robots' content='noindex,follow' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="Κανάλι σχολίων Δείγμα σελίδας &raquo; Sample Site" href="/pages/wordpress/index.php/sample-page/feed/" />
        <script type="text/javascript">
            window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/svg\/","svgExt":".svg","source":{"concatemoji":"\/pages\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.7.3"}};
            !function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),!(j.toDataURL().length<3e3)&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,65039,8205,55356,57096),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,55356,57096),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55357,56425,55356,57341,8205,55357,56507),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55357,56425,55356,57341,55357,56507),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
        </script>
        <style type="text/css">
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
</style>
<link rel='https://api.w.org/' href='/pages/wordpress/index.php/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="/pages/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="/pages/wordpress/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.7.3" />
<link rel="canonical" href="/pages/wordpress/index.php/sample-page/" />
<link rel='shortlink' href='/pages/wordpress/?p=2' />
<link rel="alternate" type="application/json+oembed" href="/pages/wordpress/index.php/wp-json/oembed/1.0/embed?url=%2Fpages%2Fwordpress%2Findex.php%2Fsample-page%2F" />
<link rel="alternate" type="text/xml+oembed" href="/pages/wordpress/index.php/wp-json/oembed/1.0/embed?url=%2Fpages%2Fwordpress%2Findex.php%2Fsample-page%2F&#038;format=xml" />
</head>
<body>
    <nav>
        <div id="desktop-nav">
            <div class="site_name">
                <a href="/pages/wordpress">Sample Site</a>
            </div>
            <ul class="nav">
                <li class="page_item page-item-2">
                    <a href="/pages/wordpress">Home Page</a>    
                </li>
                <li class="page_item page-item-2 current_page_item"><a href="/pages/wordpress/index.php/sample-page/">Δείγμα σελίδας</a></li>
            </ul>
        </div>
        <div id="mobile-nav">
            <div id="nav-dropdown">
                <div class="site_name">
                    Sample Site             </div>
            </div>
            <ul class="nav">
                <li class="page_item page-item-2">
                    <a href="/pages/wordpress">Home Page</a>    
                </li>
                <li class="page_item page-item-2 current_page_item"><a href="/pages/wordpress/index.php/sample-page/">Δείγμα σελίδας</a></li>
            </ul>
        </div>
    </nav>
<div class="content">
    <div id="sidebar" role="complementary">
        <ul>
                        <li>
                <form role="search" method="get" id="searchform" class="searchform" action="/pages/wordpress/">
                <div>
                    <label class="screen-reader-text" for="s">Αναζήτηση για:</label>
                    <input type="text" value="" name="s" id="s" />
                    <input type="submit" id="searchsubmit" value="Αναζήτηση" />
                </div>
            </form>         </li>

            <!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
            <li><h2>Συντάκτης</h2>
            <p>A little something about you, the author. Nothing lengthy, just an overview.</p>
            </li>
            -->

                    </ul>
        <ul role="navigation">
            <li class="pagenav"><h2>Σελίδες</h2><ul><li class="page_item page-item-2 current_page_item"><a href="/pages/wordpress/index.php/sample-page/">Δείγμα σελίδας</a></li>
</ul></li>
            <li><h2>Αρχείο</h2>
                <ul>
                    <li><a href='/pages/wordpress/index.php/2017/03/'>Μάρτιος 2017</a></li>
                </ul>
            </li>

            <li class="categories"><h2>Kατηγορίες</h2><ul>  <li class="cat-item cat-item-1"><a href="/pages/wordpress/index.php/category/%ce%b1%cf%84%ce%b1%ce%be%ce%b9%ce%bd%cf%8c%ce%bc%ce%b7%cf%84%ce%b1/" >Χωρίς κατηγορία</a> (1)
</li>
</ul></li>      </ul>
        <ul>

                <li><h2>Μεταστοιχεία</h2>
                <ul>
                                        <li><a href="/pages/wordpress/wp-login.php">Σύνδεση</a></li>
                                    </ul>
                </li>

                    </ul>
    </div>


    <article class="entry-content-page">
        <h3>Δείγμα σελίδας</h3><p>Αυτό είναι ένα παράδειγμα σελίδας. Είναι διαφορετική από ένα άρθρο, επειδή θα μείνει σε ένα μέρος και θα εμφανιστεί στο μενού σας (στα περισσότερα θέματα). Οι περισσότεροι αρχίζουν με μια σελίδα «Σχετικά» που τους συστήνει σε πιθανούς επισκέπτες της ιστοσελίδας. Θα μπορούσε να γράφει κάτι σαν αυτό:</p>
<blockquote><p> Γειά σου! Είμαι ταχυδρόμος με ποδήλατο τη μέρα, επίδοξος ηθοποιός τη νύχτα, και αυτό είναι το blog μου. Ζώ στο Λος Άντζελες, έχω ένα μεγάλο σκυλί με το όνομα Τζακ, και μου αρέσουν οι pi&#241;a coladas. (Και να με πιάνει η βροχή.)</p></blockquote>
<p>&#8230; ή κάτι σαν αυτό:</p>
<blockquote><p> Η XYZ Doohickey είναι μια εταιρεία όπου ιδρύθηκε το 1971, και παρέχει ποιότικα μαραφέτια στο κοινό από τότε. Βρίσκεται στην πόλη Gotham, Η XYZ απασχολεί πάνω από 2.000 ανθρώπους και κάνει όλων των είδών τρομερά πράγματα για την κοινότητα της Gotham.</p></blockquote>
<p>Ως νέος χρήστης WordPress, θα πρέπει να πάτε στον <a href="http://localhost/pages/wordpress/wp-admin/">Πίνακας Ελέγχου</a> για να διαγράψετε αυτή τη σελίδα και να δημιουργήσετε νέες σελίδες για το περιεχόμενό σας. Καλή διασκέδαση!</p>
 <!-- Page Content -->
    </article><!-- .entry-content-page -->

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#nav-dropdown').click(function(){
        console.log("CLicked");
        $('#mobile-nav .nav').toggle();
    })
});
</script>

<footer>

</footer>
</body>
</html>

使用以下CSS： 

@CHARSET "UTF-8";

nav{
    margin-top:0px;
}

nav a {
    text-decoration: none;
    color: inherit;
}

.nav li a{
    color: #1A180F;
}

.nav {
    list-style-type: none;
    background-color: #D8A62A;
}

.nav .page-item-2 {
    color: black;
    text-align: center;
}

.site_name {
        font-weight: bold;
        font-size: 1.5em;
        text-align: center;
        text-decoration: none;
}

.entry-content-page p {
    padding:3px;
}

.entry-content-page h3{
    text-align:center;
}

.entry-content-page {
    max-width:70%;
    float: right;
    margin-left:1%;
    margin-right:1%;
}

#sidebar {
    max-width:20%;
    float:left;
    background-color:#916D3E;
    color:#FBD533;
}

#searchform .screen-reader-text{
    font-size:0.8em;
    width:100%;
    text-align:left;
}

.content {
    width:100%;
    margin:0px;
}

#sidebar ul{
    width:100%;
    list-style-type: none;
    margin-right:0px;
}

#sidebar ul li{
    width:100%;
    margin-right:0px;
}

#sidebar a{
    text-decoration: none;
    color: inherit;
}

#sidebar ul li h2 {
    color: #1A180F;
}

/*Desktop-specific options*/
@media only screen and (min-width: 100px) {
    #desktop-nav {
        display:block;
    }

    #mobile-nav {
        display:none;
    }

    .nav {
        margin-top: 0px;
    }

    .nav .page_item {
        height:90px;
        line-height: 90px;
        display: inline-block;
        padding:10px;   
    }
}

/*Tablet Medium-sixed screen*/
@media only screen and (max-width:900px){

    .entry-content-page {
        width:100%;
        float:none;
        margin:0px;
        margin-left:120px;
    }

    .entry-content-page p {
        padding:0px;
        width:100%;
        margin:0px;
    }

    #sidebar {
        display:none;
    }

    #searchform {
        display: none;
    }
}

/*Smartphone*/
@media only screen and (max-width: 480px) {
    #desktop-nav {
        display:none;
    }

    #mobile-nav {
        display:block;
    }

    .nav .page-item {
        width: 100%;
    }

    #mobile-nav{
        width:100%;
        background-color: #D8A62A;
    }

    .site_name{
        width: 100%;
        margin:0px;
        padding:0px;
        cursor:pointer;
    }

    .nav {
        width: 100%;
        margin:0px;
        display:none;
    }

    #sidebar {
        display:none;
    }

    .entry-content-page {
        width:100%;
        float:none;
        margin:0px;
        margin-left:50px;
    }

    .entry-content-page p {
        padding:0px;
        width:100%;
        margin:0px;
    }

    #searchform {
        display: none;
    }
}

它被渲染成这样（现在）： 网站渲染

我要实现的是将侧边栏的内容向左移动，如下图所示（红色标记的方形）：

侧边栏

您对我将如何做有任何想法？

编辑1：

根据要求，侧边栏的html内容为： 

    <div id="sidebar" role="complementary">
     <ul>
      <li>
        <form role="search" method="get" id="searchform" class="searchform" action="/pages/wordpress/">
        <div>
            <label class="screen-reader-text" for="s">Αναζήτηση για:</label>
            <input type="text" value="" name="s" id="s" />
            <input type="submit" id="searchsubmit" value="Αναζήτηση" />
        </div>
        </form>
    </li>

     <!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
     <li><h2>Συντάκτης</h2>
        <p>A little something about you, the author. Nothing lengthy, just an overview.</p>
     </li>
        -->
      </ul>
      <ul role="navigation">
            <li class="pagenav">
             <h2>Σελίδες</h2>
               <ul>
                 <li class="page_item page-item-2 current_page_item">
                    <a href="/pages/wordpress/index.php/sample-page/">Δείγμα σελίδας</a>
           </li>
     </ul>
</li>
<li>
 <h2>Αρχείο</h2>
  <ul>
    <li>
       <a href='/pages/wordpress/index.php/2017/03/'>Μάρτιος 2017</a>
    </li>
  </ul>
 </li>       
 <li class="categories">
     <h2>Kατηγορίες</h2>
        <ul>
            <li class="cat-item cat-item-1">
               <a href="/pages/wordpress/index.php/category/%ce%b1%cf%84%ce%b1%ce%be%ce%b9%ce%bd%cf%8c%ce%bc%ce%b7%cf%84%ce%b1/" >Χωρίς κατηγορία</a> (1)
            </li>
        </ul>
</li>
</ul>
<ul>

    <li><h2>Μεταστοιχεία</h2>
        <ul>
            <li><a href="/pages/wordpress/wp-login.php">Σύνδεση</a></li>
        </ul>
     </li>              
    </ul>
</div>

2 个解决方案

解决方案1
 2  2017-03-22 16:31:40

补充工具栏ul已设置边距

#sidebar ul {margin-left:0;}

解决方案2
 1 已采纳  2017-03-22 16:40:33

只需使用以下内容： 

 #sidebar ul {
    width:100%;
    list-style-type: none;
    margin-left:0px;
    padding-left:3px;
 }

与@cpcdev ul一样，任何其他html元素都具有边距和填充选项。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 向左移动侧边栏 创建一个推送内容的左侧边栏，无需任何 CSS 或 JS 库 使用侧边栏移动内容 使用CSS定位左侧边栏 在 CSS 中移动侧边栏 CSS-左侧边栏不在左侧 从左向右移动侧栏 boostrap左侧边栏，内容右侧 CSS - 侧边栏项目未对齐左侧 如何在CSS中将侧边栏右移？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM