<分区>
要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及预期结果。另请参阅:Stack Overflow question checklist
关闭 9 年前。
<分区>
要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及预期结果。另请参阅:Stack Overflow question checklist
关闭 9 年前。
如何在没有 wrapper 的情况下将其居中？
我可以用包装器实现这一点.. http://jsfiddle.net/PEp7M/
但我希望没有人也能做到。
HTML
<div class="header">
<div class="logo">
<h1>LogoHere.com</h1>
</div>
<div class="nav">
<a>Something</a>
<a>Something</a>
<a>Something</a>
</div>
</div>
CSS
body {
margin:0px;
color:white;
}
.header {
width: 100%;
height: 50px;
background-color:black;
}
h1 {
display:inline;
}
.logo {
float:left;
}
.nav {
float:right;
}
我只是不想像上面提到的 fiddle 那样使用 .header_wrapper
最佳答案
如果您希望标题中的内容保持在居中区域，您可以向标题元素添加左右填充。
<div class="header">
<div class="logo">
<h1>LogoHere.com</h1>
</div>
<div class="nav">
<a>Something</a>
<a>Something</a>
<a>Something</a>
</div>
</div>
body {
margin:0px;
color:white;
}
.header {
height: 50px;
background-color:black;
padding: 0 20%;
}
h1 {
display:inline;
}
.logo {
float:left;
}
.nav {
float:right;
}
不过，我认为包装元素更有意义。如果您担心一遍又一遍地编写相同的代码(例如，.header-wrapper、.content-wrapper、.footer-wrapper 等)只需创建一个可重用的类，为它们添加相同数量的填充。
关于html - 没有包装的居中内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19019570/