Css将补充工具栏内容移到左侧

时间：2017-03-22 16:29:22

标签： 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;
    }
}

它会像那样呈现（现在）： Site render

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

Sidebar

你有什么想法我会怎么做？

EDIT1：

根据要求，侧边栏的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 个答案:

答案 0 :(得分：2)

边栏ul有边距设置

#sidebar ul {margin-left:0;}

答案 1 :(得分：1)

只需使用以下内容：

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

由于@cpcdev ul和任何其他html元素都有边距和填充选项。

相关问题
最新问题