两种排列方法。 - 走看看

zoukankan html css js c++ java

两种排列方法。
第一种：用float:left
123

123

123
123

123

123
123

123

123
第二种，用margin-left为负值来处理
- qwe
- qwe
- qwe
- rty
- rty
- rty
- yui
- yui
- yui
<!DOCTYPE html>
<html>
<head>
    <title>列</title>
    <meta charset="utf-8"/>
     <style style="text/css">
         div{float:left;}
     </style>
     <style>
       #lie{line-height: 3em;}
       .e{margin-left: 80px;}
       .f{margin-left: 160px;}
       li.top { margin-top:-9em;}
     </style>
</head>
<body>
  <p>第一种：用float:left<span style="line-height: 1.5;"> </span></p>

  <div>
      <ul>
         <li class="a">123</li>
         <li class="a">123</li>
         <li class="a">123</li>
      </ul>
  </div>
  <div>
       <ul>
         <li class="b">123</li>
         <li class="b">123</li>
         <li class="b">123</li>
       </ul>
   </div>
   <div>
        <ul>
         <li class="c">123</li>
         <li class="c">123</li>
         <li class="c">123</li>
        </ul>
   </div>
<br />
<br />
<br />
<p> </p>
<hr />
  <p>第二种，用margin-left为负值来处理</p>
         <ul id="lie">
            <li class="d">qwe</li>
            <li class="d">qwe</li>
            <li class="d">qwe</li>
            <li class="e top">rty</li>
            <li class="e">rty</li>
            <li class="e">rty</li>
            <li class="f top">yui</li>
            <li class="f">yui</li>
            <li class="f">yui</li>
         </ul>
 <hr />
</body>
</html>
查看全文

相关阅读:
pwdLastSet AD
快递条形码类型
 Sharepoint 应用程序池自动停止
 Visual Studio 2015安装后“无法启动iis express web 服务器”
Knockout自定义绑定数据逻辑
 Knockout基本绑定数据
 TableAttribute同时存在于
 微服务架构下的鉴权，怎么做更优雅？
使用 Yopto 插件给商品添加评论
 Docker 基本概念

原文地址：https://www.cnblogs.com/liurenxingyu/p/4607021.html

Copyright © 2011-2022 走看看