0

好的，所以我每天都在报废我的 css/html 技能，但总是遇到一些问题。我确定我在这里做的是非常菜鸟编码。无论如何，我试图在网页中心创建一个非常简单的容器，顶部有一个导航栏，没有空间分隔它们。这是我到目前为止所拥有的，：/

index.html - http://pastie.org/5149875 style.css - http://pastie.org/5149890

感谢所有帮助，如果您有任何提示，请告诉我！:)

附带问题：为什么我的 navbarwidth 必须大于 800px 才能与 mytablediv 匹配？

4

3 回答 3

1

你没有做这么糟糕的工作。margin-left我学到的最大的教训之一是通过分配和margin-rightto使事物居中变得非常容易auto。您也可以将其简化为简单的单行代码：

margin: 0 auto;

如果你删除float: left并用它替换你的边距，你的元素应该居中。中间空格的问题可能是元素内部边距的问题（是的，这些也会影响它）。如果您有<h1>，则可以在它们之间创建一个间隙。

侧面答案：您必须将导航栏宽度设置为超过 800 像素才能匹配的原因是因为您在底部添加了填充，这将使有效宽度为 800 像素 + 2 x 填充。

于 2012-11-01T02:33:58.100 回答
0

这是您在jsFiddle上的 html 和样式需求的缩小版本。基本上将您的页面包装在一个容器元素中，然后设置其宽度，然后将边距设置为margin:0 auto;使其居中，如下所示。要查看 800px 设置的更好示例，请转到此处

<html>
<head>
    <title> Learning </title>
    <link type="text/css" href="style.css" rel="stylesheet" />
    <style>
        #container{
            width: 800px;
            margin: 0 auto;    
        }
        #anavbar{
            border:solid 1px #000;       
        }
        #mytable{
            padding:10px;       
        }
    </style>
</head>
<body>
<div id="container" style="width:800px;margin:0 auto;">
    <div id="anavbar">
        <a href="#">Home</a>
        <a href="#">Aboute</a>
        <a href="#">Social</a>
        <a href="#">Contact</a>
    </div>
   <div id="mytable">
        <p>A new test by the frank man.</p>
    </div>
</div>

​</p>

于 2012-11-01T02:33:51.550 回答
0

别担心，我是来帮你的。我给你一个简单的代码。使用和学习技巧。

菜单 HTML

<div class="menu-bg">
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">F.A.QS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div class="clear"></div>
</div>
</div>

菜单 CSS

.menu-bg{background:#999 repeat-x; border:1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.menu{width:100%;}
.menu ul{list-style:none;}
.menu li{float:left;}
.menu a{font-family:Calibri; font-size:14px; font-weight:bold; text-decoration:none; color:#dcdcdc; padding-left:30px; padding-right:30px; line-height:40px;}
.menu a:hover{font-family:Calibri; font-size:14px; font-weight:bold; text-decoration:none; color:#000; padding-left:30px; padding-right:30px; line-height:40px;}
.clear{clear:both;}

希望这对您有所帮助。干杯...............

于 2012-11-01T09:40:31.077 回答