顶部栏不会拥抱顶部，文本不会居中，并且不会填满整个屏幕？答案

【问题标题】：top bar won't hug the top, text won't center, and doesn't fill the whole screen?顶部栏不会拥抱顶部，文本不会居中，并且不会填满整个屏幕？
【发布时间】：2013-02-10 03:44:12
【问题描述】：

这就是我所拥有的

http://jsfiddle.net/ftKw5/

/* CSS element classes */
 @font-face {
    font-family:'myriad-webfont';
    src: url('webfont/myriad-webfont.ttf') format('truetype'), url('webfont/myriad-webfont.svg#myriad_webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: myriad-webfont;
    color: #000000;
    background: url('img/silk_pat@2x.png');
    letter-spacing: 2px;
}
h2 {
    ;
    font-size: 3;
}
::-webkit-input-placeholder {
    color:#222222;
    opacity:0.1;
}
/* CSS element IDs */
 #outer-wrapper {
    width: 50em;
    margin: 1em auto;
    background-position:inherit;
    border: 2px solid #dcdcdc;
    border-radius: 1.5em;
    position:relative;
    background-color: #ffffff;
}
#surtitle {
    border-bottom: 1px solid #dcdcdc;
    text-align: center;
    opacity: 0.3;
    font-size:15px;
    letter-spacing: 7px;
}
#topnavbar {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    opacity: 0.5
}
/* Dropdown */
 .nav {
    padding-top:-10;
    height:36px;
    background:#aaa;
    color:#fff;
    text-shadow:1px 1px #888;
    z-index:400
}
.menu a {
    float:right;
    color:#eee;
    text-decoration:none;
    width:120px;
    height:28px;
    padding-top:8px
}
.menu span {
    float:right;
    color:#eee;
    text-decoration:none;
    width:120px;
    height:28px;
    padding-top:8px
}
.menu a:hover {
    color:#fff
}
.menu {
    list-style:none;
    font:10px;
    text-align:center;
    width:600px;
    margin:0;
}
.menu li {
    position:relative;
    float: right;
    width:120px;
    z-index:400
}
.menu ul {
    margin:0;
    padding:0;
    outline:0;
    display:none;
    position:absolute;
    font:10px;
    top:36px;
    left:0;
    background:#aaa;
    display:none;
    list-style:none
}
.menu ul li {
    float:none;
    border-top:1px solid #ccc;
    width:120px
}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
    float:none;
    display:block;
    background:none;
    height:22px;
    padding-top:5px
}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {
    background:#999;
    color:#fff
}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
    float:none;
    display:block;
    background:none;
    height:22px;
    padding-top:5px
}
.menu ul ul {
    left:120px;
    top:0
}
.menu li.submenu {
}
.menu li.noborder {
    border-top:none
}
li.menuhover a, li.menuhover li.menuhover a {
    color:#fff;
    background:#999
}
li.menuhover span, li.menuhover li.menuhover span {
    color:#fff;
    background:#999
}

由于某种原因，当我运行它时，它不会拥抱顶部等。我添加了 jsfiddle 以便于阅读，并且您可以看到与它一起使用的 html。

【问题讨论】：

为我工作。您在哪些浏览器中看到此内容？
请不要发布为您修复 JSFiddle 的隐蔽请求的链接。这不是这个网站的目的。
@ElRojito 请看看我的回答，如果有任何问题，请告诉我。
是的，meagar，这就是我正在做的。只是掩饰我的请求……等等，我寻求帮助？我在 Safari 中使用它。

标签： html css center padding

【解决方案1】：

如果我理解你的问题正确，下面的 css 将对你有所帮助。

CSS：

body {
    font-family: myriad-webfont;
    color: #000000;
    background: url('img/silk_pat@2x.png');
    letter-spacing: 2px;
    padding:0; // it will remove padding from body tag
    margin:0; // it will remove margin from body tag
}

cmets 中新需求的回答（菜单应该在顶栏的中心）：

.menu {
    list-style: none outside none;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    text-align: center;
    width: 368px;
}


.menu li {
    float: left;
    width: 120px;
    z-index: 400;
}

【讨论】：

我的答案工作正常，那么您能否将其标记为正确（正确）....所以它将来对社区中的其他人有所帮助。这就是stackoverflow的规则。 :-)
欣赏！文字仍然挂在左边，如果你有一个很棒的想法。但到目前为止，这太棒了
哪个文本挂在左边，你能指定我可以帮助你吗。
“一二三”上方的文字。 imgur.com/HiXxi8G 有截图。菜单一个 div 和 span。
我认为首先它们应该是一、二和三。你想要它在顶部栏的中心吗？我在等。