<html>
<head>
<link rel="stylesheet" href="../static/styles/base.css" type="text/css" />
</head>
<body>
<div id= "top-nav">
<h1>Sitename</h1>
<ul>
<li><a href="#">Feed</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
</body>
</html>
#
html,
body {
height: 100%;
width: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#top-nav{
background-color: Gray;
width: 100%;
height: 135px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#top-nav h1{
float: left;
margin: inherit;
padding-right: 700px;
}
#top-nav ul{
float: left;
bottom: 0;
}
#top-nav li{
text-align: right;
display: inline;
padding-right: 5px;
}
我希望我的布局是，让 h1 垂直对齐在顶部导航 div 的中心，我希望 ul 位于顶部导航底部页面的右侧.为什么我会得到意想不到的结果？
最佳答案
#top-nav h1 中的 padding-right: 700px 规则将 ul 元素推离位置。
像这样的东西应该可以工作:
html,
body {
height: 100%;
width: 100%;
padding: 0; /* You can just have one 0 instead of "0 0 0 0". */
margin: 0;
}
#top-nav {
background-color: Gray;
width: 100%;
height: 135px;
}
#top-nav h1 {
float: left;
line-height: 135px; /* Set to the height of #top-nav */
margin: 0;
}
#top-nav ul {
float: right;
}
#top-nav li {
text-align: right;
display: inline;
padding-right: 5px;
}
关于css - 为什么这不能正确对齐我的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14923369/