Question

我正在尝试制作一个带有边框的流畅网页，但是当我使用css使其变得流畅时，外围的右边界不合适

HTML代码：

<!DOCTYPE html>
                <html>
                <body>
                    <div class="gridContainer clearfix">
                    <div id="LayoutDiv1">
                    <div id="container">
                        <header>
                            <h1>Heading 1</h1>
                            <h2>Heading 2</h2>
                        </header>
                        <nav>
                            <ul>    
                                <li><a href="index.html">Home</a></li>  
                                <li><a href="link1.html">Link 1</a>
                                    <ul>
                                        <li><a href="gallery1.html">Gallery</a></li>
                                    </ul>
                                </li>
                                <li><a href="link2.html">Link 2</a>
                                    <ul>
                                        <li><a href="gallery2.html">Gallery</a></li>
                                    </ul>
                                </li>
                                <li><a href="link3.html">Link 3</a>
                                    <ul>
                                        <li><a href="gallery3.html">Gallery</a></li>
                                    </ul>
                                </li>
                                <li><a href="link4.html">Link 4</a></li>
                            </ul>
                        </nav>

                        <section>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

                        </section>
                        <footer>
                            <p>&copy; Test</p>
                        </footer>
                    </div>
                    </div>
                    </div> 
                </body>
                </html>

样式化CSS：

#container{
                    background:#228b22;
                    float:left;
                    border:1px solid #000000;
                    width:98%;
                }

                body {
                    font-family:Arial, Helvetica Neue, Helvetica, sans-serif;
                    font-size:90%;
                    margin:20px auto;
                    text-align:center;
                    line-height:1.4em;
                    width:98%;
                    background:white;
                }

                header, section, article, footer,  nav{
                    padding:10px 20px 20px;
                    margin:10px;
                    float:left;
                    width:90%;
                    border:1px solid #000000;
                }

                header {
                    display:block;
                    position:relative;
                    text-align:left;
                }

                header h1 {
                    font-size:2.3em;
                    text-transform:none;
                    text-align:center;
                }

                header h2 {
                    margin:10px 0px 20px;
                    font-size:1.3em;
                    text-align:center;
                }

                nav {
                    float:left;
                    text-align:center;
                    display:block;
                }

                nav ul{
                    margin-left:15%;
                    padding:0;
                    list-style:none;
                    text-align:center;
                }

                nav ul li{
                    float:left;
                    width:150px;
                    height:30px;
                    line-height:30px;
                    text-align:center;
                    background:#4ea24e;
                    border:1px solid #000000;

                }

                nav ul li a{
                    text-decoration:none;
                    color:black;
                }

                nav ul li li{
                    background:#4ea24e;
                    color:#fff;
                    display:none;
                    float:left;
                    margin-left:-17.9%;
                }

                nav ul li li:hover{
                    background:#7ab97a;
                }

                nav ul li li a{
                    text-decoration:#8A5C2E;
                    color:#black;
                }

最后，流体网格代码：

        img, object, embed, video {
            max-width: 100%;
        }
        /* IE 6 does not support max-width so default to width 100% */
        .ie6 img {
            width:100%;
        }

        /* Mobile Layout: 480px and below. */

        .gridContainer {
            margin-left: auto;
            margin-right: auto;
            width: 87.36%;
            padding-left: 1.82%;
            padding-right: 1.82%;
        }

        #LayoutDiv1 {
            clear: both;
            float: left;
            margin-left: 0;
            width: 100%;
            display: block;
        }

        /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

        @media only screen and (min-width: 481px) {
        .gridContainer {
            width: 90.675%;
            padding-left: 1.1625%;
            padding-right: 1.1625%;
        }
        #LayoutDiv1 {
            clear: both;
            float: left;
            margin-left: 0;
            width: 100%;
            display: block;
            border:1px solid #000000;
        }
        }

        /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

        @media only screen and (min-width: 769px) {
        .gridContainer {
            width: 88.2%;
            max-width: 1232px;
            padding-left: 0.9%;
            padding-right: 0.9%;
            margin: auto;
        }
        #LayoutDiv1 {
            clear: both;
            float: left;
            margin-left: 0;
            width: 100%;
            display: block;
        }
        }

非常感谢任何帮助

Answer 1

您不应该/不需要为内部元素设置固定宽度，因为如果设置了填充和边距，它们可能会溢出外部容器。只需将标题，部分和导航的宽度保留为auto，然后使用margin控制其宽度。

边框问题和流畅的布局

1 个答案: