Fatal编程技术网
  • php/
  • Php html/css设计的框未正确对齐

Php html/css设计的框未正确对齐

php html css

Php html/css设计的框未正确对齐,php,html,css,Php,Html,Css,今晚，我将开始让自己看起来更专业，并开始添加内容。我想解决的第一个问题是一个困扰我很长时间的问题。如果你访问我的网站，你会看到盒子偏离中心（并向左浮动），而其他所有东西都排列在中心。我已经看过了我的html/css/php代码，但我无法找出问题所在（基于Web的编程不是我的强项之一，但是我宁愿自己学习并编写代码，也不愿花钱请人代我编写）。无论如何，生成的html代码： <!DOCTYPE html> <html lang="en"> <head>

今晚，我将开始让自己看起来更专业，并开始添加内容。我想解决的第一个问题是一个困扰我很长时间的问题。如果你访问我的网站，你会看到盒子偏离中心（并向左浮动），而其他所有东西都排列在中心。我已经看过了我的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>
您需要从
NAV
元素中的
UL
标记中删除默认边距和填充值

nav ul {
    margin: 0;
    padding: 0;
}
您可以尝试以下代码：

ul{padding:0; margin:0;}
使用下面的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



    …

...
此外，也没有属性为
float:center
。必要时使用
float:left
或
float:right
。

框未偏离中心并向左浮动。差异是由于UL标记中的默认填充。另一件事是，您尚未定义框的任何宽度，因此默认情况下，div的宽度为100%。您可以定义一个特定的宽度，然后将其居中对齐。

请添加一个提琴或一些链接以检查指向该站点的链接？是的。看看第一行的网站，我错了。我忘了写结束语了。我会立即编辑它。我会看到中间的方框。我看到的唯一左对齐的是文本“问候！我是DTSCode！”你能在jsFilde（）中复制它吗，因为一旦你的站点被修复，链接就没用了。这不是指向导航栏吗？是的，但这是偏离中心的。基本上你找错地方了。内容框完全居中。导航中的无序列表具有需要覆盖的默认填充和边距值。这些值当前强制菜单位于中间偏右，显示框有故障。使用chrome中的开发者工具来检查页面并亲自查看。我现在明白了。我的错误。看起来盒子偏离了中心。谢谢你的帮助！ 
    /*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; }

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