Question

今晚，我将开始让website更专业，并开始添加内容。我想谈谈的第一个问题是一直困扰我很久的问题。如果你去我的网站，你会看到盒子偏离中心（并向左浮动），而其他一切都在中心排队。我已经超过了我的html / css / php代码，但我无法弄清楚问题（基于Web的编程不是我的强项之一，但是我宁愿自己学习和编写代码而不是付钱给别人为我做这件事）。无论如何，生成的HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Dragon Tooth Software</title>

        <link rel="icon"       href="/images/favicon.ico" />
        <link rel="stylesheet" href="css/main.css" />
        <link rel="stylesheet" href="css/font.css" />
        <link rel="stylesheet" href="css/banner.css" />
        <link rel="stylesheet" href="css/navbar.css" />
        <link rel="stylesheet" href="css/index.css" />
        <link rel="stylesheet" href="css/box.css" />

        <meta name="google-site-verification" content="1OG6sLqFnSg_Azq0tJjkpqPklx0KhO1cu7S5ii60FKc" />
    </head>

    <body>
        <header>
    <a href="/index.php"><img src="/images/banner.jpg" height="100px" width="925px" /></a>
    <h1>Dragon Tooth Software</h1>
    <h2>Rule the Web</h2>
</header>
<nav>
<ul>
<li class="current"><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="projects.php">Projects</a></li>
<li><a href="tutorials.php">Tutorials</a></li>
</ul>
</nav>

    <div class="content-box">
<h1 class="header">Welcome to Dragon Tooth Software</h1><p class="content">Greetings! I am DTSCode!</p>
</div><br /><div class="content-box">
<h1 class="header">Thursday, July 17<sup>th</sup>, 2014</h1><p class="content">www.dragontoothsoftware.com is officially open!</p>
</div><br />    </body>
</html>

和组成框的css文件：

.content-box {
    float: center;
    padding: 20px;
    border-radius: 10px;
    border: 10px solid gray;
}

Answer 1

您需要从UL元素中的NAV标记中删除默认的边距和填充值。

nav ul {
    margin: 0;
    padding: 0;
}

Answer 2

您尝试下面的代码：

ul{padding:0; margin:0;}

Answer 3

使用下面的css来规范化css并创建一个包装类。

CSS：

    /*limited reset*/
    html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video {
        margin: 0;
        padding: 0;
        border: 0;
    }

   .wrapper{ width:960px; margin:0 auto; }

遵循以下html结构

HTML

            <nav>
                <div class="wrapper">
                    <ul>....</ul>
                </div>
            </nav>
            <div class="container">
                <div class="wrapper">
                    <div class="content-box">...</div>
                </div>
            </div>

此外，没有float:center属性。

，请使用float:left或float:right。

Answer 4

盒子没有偏离中心并且向左浮动。差异是由于UL标签中的默认填充。另一件事是您没有为框定义任何宽度，因此默认情况下，div的宽度为100％。你可以定义一个特定的宽度然后集中对齐它。

html / css设计的盒子没有正确排队

4 个答案: