Question

怎么把UL标签排成一列放在顶部,为什么顺序会颠倒?而且还放不进去顶部的DIV中？

UL标签不能排成一列放在顶部,而且为什么顺序会颠倒?而且还放不进去顶部的DIV中？
下面是BODY代码部分：
<div id="header"><img src="iamge/QQ图片20161114121120.png">这里是顶部
<ul>
<li><a href="#">导航链接一</a></li>
<li><a href="#">导航链接二</a></li>
<li><a href="#">导航链接三</a></li>
<li><a href="#">导航链接四</a></li>
</ul>
</div>
下面是样式部分代码：
<style type="text/css">
*{margin:0;padding:0;}
#header{width:100%;background-color:#121010;}
#header img{width:282px;height:50px;}
#header ul{float:right;width:100%;padding:0;margin:0;list-style-type:none;display:inline;}
#header li{float:right;width:7em;text-decoration:none;color:white;padding:0.2em 0.6em;}
#header a:hover{background-color:#F5F5F5;}
#header li{display:inline;}

</style>
大神指点我一下。
这是在浏览器中预览的样子，我要吧下面四个LI表现放到上面的黑色部分。并且顺序要对，要顶着右边

Answer 1

<style type="text/css">
*{margin:0;padding:0;}
#header{width:100%;overflow:hidden;background-color:#121010;}
#header ul, #header li{list-style:none;}
#header img{float:left;width:282px;height:50px;}
#header ul{float:right;height:50px;line-height:50px;overflow:hidden;}
#header li{float:left;width:7em;}
#header a:hover{background-color:#F5F5F5;}
</style>
<div id="header">
 <img src="iamge/QQ图片20161114121120.png">
 <ul>
  <li><a href="#">导航链接一</a></li>
  <li><a href="#">导航链接二</a></li>
  <li><a href="#">导航链接三</a></li>
  <li><a href="#">导航链接四</a></li>
 </ul>
</div>