Question

好的，所以我每天都在消除我的css / html技能，但总会遇到一些问题。我确定我在这里做的非常棒的编码。无论如何，我正在尝试在网页的中心创建一个非常简单的容器，其上面有一个导航栏，没有空格将它们分开。这是我到目前为止所做的：/

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

感谢所有帮助，如果您有任何提示，请告诉我们！：）

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

Answer 1

你做得不好。我学到的最重要的课程之一是通过将margin-left和margin-right分配给auto来实现内容化。您也可以将其简化为简单的单行程序：

margin: 0 auto;

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

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

Answer 2

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

<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>

Answer 3

别担心，我来这里是为了帮助你。我给你一个简单的代码。使用＆amp;学习技巧。

菜单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;}

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

带容器的CSS / HTML Navbar？

3 个答案: