ulclass=设置右浮动

当我们要实现ul标签在右上角横向排列时，往往会采取给<ul>、<li>添加有浮动的方法，这样会出现<li>内容出现的顺序跟我们写的不一样的情况，例如：

我们写的是这样的：

<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/* 内边距

个人建议你先在css最顶端清除默认边距

*{

margin：0；

padding：0；/*因为有的像ul， h1...h6 都有默认边距，这样就把他们的边距清除了，具体在需要的话你可以在相应的类里面设置*/

}

.wrap{

/*这里面写的属性，是你上面的代码ul的属性*/

}

ul li {

/*这里面写li的属性，这样所有ul里面的li 都是这里面的属性*/

}

这种情况如果有个别不一样的，你可以单独在给那个li设置一个类class。

ul li a{

/*这里面写a的属性，这样所有li里面的a都是这里面的属性*/

}

还要在li里面不要在添加div，虽然能实现功能，不过这样的话显着你的li用的没意义。

---