我们写的是这样的：
<div id="headerTop">
<header class = "main">
<div class="logo l">
<p>Classic</p>
</div>
<div class="ulList">
<ul class = "r">
<li><a href="#">Home</a></li>
<li><a href="#">Aboout</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
</div>
登录后复制
得到的结果是这样的：
此时我们可以使用flex布局
css
.main{ width: 1340px margin:0 auto} /*margin: auto->使该区域在浏览器中央*/
* {
margin: 0/* 外边距 */
padding: 0/* 内边距
要让 UL (unordered list) 列表横置并靠右，您可以使用 CSS：cssCopy code
ul {
display: inline-block
text-align: right
}
将 display 属性设置为 inline-block 将使列表项呈横向布局，而将 text-align 属性设置为 right 将使列表内容靠右对齐。
请注意，如果您希望更改列表中的每个项目的样式，则可能需要对每个列表项目单独定义样式。
<head><meta http-equiv="Content-Type" content="text/htmlcharset=gbk"/><!--{dede:global.cfg_soft_lang/}-->
<style type="text/css">
ul{width:200px}
h1{ font-size:12pxfont-weight:normalfloat:left}
span{font-size:12pxfloat:right}
ul,li,h1{padding:0margin:0}
ul li{list-style-type:none}
</style>
</head>
<ul>
<li><span>2011-4-13</span><h1>今天是4月13日星期三</h1></li>
<li><span>2011-4-13</span><h1>今天是4月13日星期三</h1></li>
<li><span>2011-4-13</span><h1>今天是4月13日星期三</h1></li>
<li><span>2011-4-13</span><h1>今天是4月13日星期三</h1></li>
</ul>
你的那去试一试，多余的东西删掉，有些有没父容器的需要自己要加上，你应该懂得！
