简体   繁体   中英

Css move Sidebar content to the left

I have the following 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>

With the following 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;
    }
}

That it gets rendered like that (for now): 网站渲染

What I want to acheive is to move the contents of the sidebar towards to the left as you see in the following picture (the red marked scquare):

侧边栏

Do you have any sort of idea how I will do that?

EDIT1:

As requested the html content of sidebar is:

    <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>

补充工具栏ul已设置边距

#sidebar ul {margin-left:0;}

Just use the following:

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

As @cpcdev ul and any other html element has margin and padding options.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM