在html页面中,我们总是会遇到这样的情况:
当然,这是比较简单的情况,用ul内包li就可以,
<ul>
<li><img src="logo.jpg">BUSINESS COMPANY</li>
<li>HOME PAGE</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>SUPPORT</li>
<li>CONTACT</li>
</ul>
在写css样式的时候,当设置li的样式时,可以将li的float属性设置为:float:left,
li{
display:inline-block;
width:75px;
height:40px;
background:grey;
float:left//这条最重要,要将几条li水平显示
}
而遇到大的div块级元素时,这种向左浮动的方式同样适用,例如
像这种情况,也可以设置ul,在里面写入li,将这几个div置于li里面,在设置flloat:left,但是相对麻烦,我们可以采取如下办法:
三个div均设置class,class名写成一样;
<div class="pal_pic"></div>
<div class="pal_pic"></div>
<div class="pal_pic"></div>
在下面的pal_pic写属性时,可做如下处理:
.pal_pic{
30.333%;
float: left;//这条非常重要,可将几个clas名一样的div水平排列
margin-left: 15px;
}
随后,往div里写入内容后,即可达到全部水平排列的效果。