html - Css 将侧边栏内容移到左侧

标签 html css

我有以下 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

我想要实现的是将侧边栏的内容向左移动，如下图所示(红色标记的正方形):

Sidebar

你知道我会怎么做吗？

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

最佳答案

侧边栏 ul 设置了边距

#sidebar ul {margin-left:0;}

关于html - Css 将侧边栏内容移到左侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42957534/

上一篇：html - 我的 div 元素没有完全居中。 (他们看起来像但不是。)

下一篇：html - 每个 div 显示两个内联图像并调整大小

相关文章：

html - 页脚不会停留在页面底部且左侧 float div 的情况下

html - 在 materializecss 上覆盖 css

jquery - 如何删除应用于下拉菜单的默认 Bootstrap 效果？

css - JavaFX Web View 的特定 CSS

javascript - 将svg中的样式标签和xml嵌入到html页面中可以吗？

javascript - 如何在 .append 输入字段上显示来自 DB 的数据

HTML Favicon.ico 不会在 Google Chrome 上显示

php - 选项选择的默认设置

jquery - 如何直接在图像下获取菜单栏？

jquery - 是否可以使用 jQuery 以编程方式设置 html attr 值？

©2024 IT工具网  联系我们