1

我的目标是让文章位于 leftnav 和 rightnav 的中间。我目前的语法是允许 leftnav 和 side 相互“粉碎”。我在文章中添加了左边距和左边距，但这似乎不起作用。如何在不“砸”到左导航的情况下将文章放在页面中心？谢谢大家。

CSS

/* CSS Document */

body{
 background-color:#9F6;
}

section{
 width:960px;
 /*padding:15px;*/
}

header{
 height:150px;
 outline:#000 dotted;
}

nav{
 position:relative;
 outline:#000 dotted;
}

nav ul{
 padding:15px;
}

nav ul li{
 /* Moves the nav in a horizontal fashion */    
 display:inline;
}

nav ul li a{
 list-style-type:none;
 text-decoration:none;
 text-transform:capitalize;
 padding:15px;
}

nav ul li a:hover{
 background-color:#F00;
 color:#0FF;
}

#leftnav{
 float:left;    
 width:160px;
 outline:#000 dotted:
 /*margin-right:15px; */
 /*padding:15px;*/
 /*padding-right:2cm;*/
}

#rightnav{
 float:right;   
 width:160px;
 outline:#000 dotted:
}

aside, article{
 min-height: 550px;
 /*background-color: #F96;*/
 outline:#000 dotted;
 /*padding: 1px;*/
}   

article{
 width:750px;
 /*margin-left:15px;*/
 /*padding-left:65px;*/
}

footer{
 width:960px;
 outline:#000 dotted;
 margin-top:15px;
 text-align:center;
}

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="another-css.css">
<title>Another Test</title>
</head>

<body>
    <section>
        <header>
         <h3>This Is The Header</h3>
        </header>

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Cars</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </nav>

        <aside id="leftnav">
        aside left
        </aside>

        <aside id="rightnav">
        aside right
        </aside>

        <article>
        article
        </article>

        <footer>
        Copyright 2013
        </footer>

    </section>
</body>

</html>
4

3 回答 3

6 
margin-left: auto;
margin-right: auto;

你有没有试过在文章中使用上面的代码

于 2013-10-12T17:09:34.820 回答
3

margin:0 auto;为文章类设置：

article{
 width:600px;    /*   decreased to 600px  */
    margin:0 auto;          /* added  */
 /*margin-left:15px;*/
 /*padding-left:65px;*/
}

jsfiddle

于 2013-10-12T17:09:27.683 回答
1

这是一个边际问题。将此添加到您的文章 CSS

margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;

宽度由 px 定义，因此您可能必须将它们调整为您的分辨率

于 2013-10-12T17:14:26.183 回答