<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 在顶部导航底部的页面右侧。为什么我会得到意想不到的结果?