zoukankan      html  css  js  c++  java
  • float:left的妙用

      在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里写入内容后,即可达到全部水平排列的效果。

  • 相关阅读:
    JAVA EE 第一阶段项目问题
    车辆管理系统之开始自己的任务(三)
    车辆管理系统之搭建框架 添加必要的数据 安装svn(二)
    车辆管理系统之分析信息建表(一)
    牛客问题
    记录---base64
    JAVA EE 第一阶段考试
    简单ssh框架整合
    Struts2拦截器
    Struts2文件上传
  • 原文地址:https://www.cnblogs.com/xiangxiao/p/4732874.html
Copyright © 2011-2022 走看看