精华内容
下载资源
问答
  • DIV+CSS分两列(多列)布局显示,下面有个不错的示例,大家可以参考下
  • 这个比较基础,仅记录。 ... <div class="detail-item-warpper">...li> <span>业务类型</span>: <span>{{ detailData.bizType }}</span> </li> <li>

    这个比较基础,仅记录。

    html:

    <div class="detail-item-warpper">
          <ul class="ulbox">
            <li>
              <span>业务类型</span>:
              <span>{{ detailData.bizType }}</span>
            </li>
            <li>
              <span>业务子类型</span>:
              <span>{{ detailData.bizTypeSub }}</span>
            </li>
            <li>
              <span>费用类型</span>:
              <span>{{ detailData.feeType }}</span>
            </li>
            <li>
              <span>任务ID</span>:
              <span>{{ detailData.id }}</span>
            </li>
            <li>
              <span>申请单ID</span>:
              <span>{{ detailData.applyId }}</span>
            </li>
            <li>
              <span>单据类型</span>:
              <span>{{ detailData.invoiceType }}</span>
            </li>
            <li>
              <span>发票抬头</span>:
              <span>{{ detailData.invoiceTitle }}</span>
            </li>
            <li>
              <span>开票主体</span>:
              <span>{{ detailData.companyName }}</span>
            </li>
            <li>
              <span>申请金额</span>:
              <span>{{ detailData.invoiceAmount }}</span>
            </li>
            <li>
              <span>审批提交原因</span>:
              <span>{{ detailData.applyReason }}</span>
            </li>
            <li>
              <span>所有审批人</span>:
              <span>{{ detailData.allPsr }}</span>
            </li>
            <li>
              <span>实际审批人</span>:
              <span>{{ detailData.psr }}</span>
            </li>
            <li>
              <span>申请人</span>:
              <span>{{ detailData.applyer }}</span>
            </li>
            <li>
              <span>审批状态</span>:
              <span>{{ detailData.state }}</span>
            </li>
            <li>
              <span>审批时间</span>:
              <span>{{ detailData.oprateTime }}</span>
            </li>
            <li>
              <span>审批驳回或者通过原因</span>:
              <span>{{ detailData.operateReason }}</span>
            </li>
            <li>
              <span>审批状态</span>:
              <span>{{ detailData.state }}</span>
            </li>
            <li>
              <span>审批创建时间</span>:
              <span>{{ detailData.createdTime }}</span>
            </li>
            <li>
              <span>最后操作人</span>:
              <span>{{ detailData.editor }}</span>
            </li>
            <li>
              <span>最后操作时间</span>:
              <span>{{ detailData.modifiedTime }}</span>
            </li>
          </ul>
        </div>

    css:

      .detail-item-warpper {
        margin-bottom: 10px;
        padding: 20px 32px;
        background-color: #fff;
        .ulbox {
          overflow: hidden;
          li {
            min-width: 280px;
            padding-bottom: 20px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            float: left;
            > span {
              line-height: 20px;
            }
          }
    
        }
      
      }

    效果:

    任意多列,仅需修改width(min-width)和margin-right两个属性即可

    和el-row、el-col、el-form-item的布局区别:

     

    如果是el-form-item不容易做到在lable后面紧跟着填充内容的效果,比如这种

    展开全文
  • 一个朋友不明白DIV自动用程序来控制多排多列.怎么放#ID.这个小例子.一看你就知道DIV怎么多列动态显示了. 最左边一排.要无marign-left 后面的marin-left自设
  • 有时候会需要ul的li都在同一行显示,避免li跑到下一行去,今天遇到了这个问题,记录下来,避免忘记~...margin-bot...

    有时候会需要ul的li都在同一行显示,避免li跑到下一行去,今天遇到了这个问题,记录下来,避免忘记~

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    Document

    *{

    padding: 0;

    margin-bottom:0;

    border: 0;

    }

    .box{

    width: 640px;

    height: 50px;

    overflow-x: scroll;

    overflow-y: hidden;

    }

    ul{

    display:inline;

    white-space: nowrap;

    }

    ul li{

    padding: 10px 20px;

    display: inline-block;

    background:pink;

    white-space:nowrap;

    }

    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示
    • 所有li都在一行显示

    随便写了下,好丑,不要在意细节哈哈哈~~~~

    展开全文
  • CSS3 多列布局的跨列

    千次阅读 2018-02-24 22:05:01
    跨列默认情况下,多列容器中的内容,会一列一列地自动填充。但有时候,却需要其中的某些内容(如,文章标题)不是多列布局,而是横跨所有列。要实现类似报纸、杂志上的跨列效果,就可以使用 column-span属性,来控制...

    默认情况下,多列容器中的内容,会一列一列地自动填充。但有时候,却需要其中的某些内容(如,文章标题)不是多列布局,而是横跨所有列。

    要实现类似报纸、杂志上的跨列效果,就可以使用 column-span属性,来控制多列容器中的某个子元素是否横跨所有列,取值为 none | all。none 表示不跨列,all 表示横跨所有列。

    如,在上述结构中增加一个 h2 标题和若干个段落,为了节省篇幅,用(…)代替略去的内容:

    
    
    1. <div>
    2. <p>在CSS3之前,要…实现起来也很困难。</p>
    3. <p>CSS3多列布局的出现,彻底改变…分布到多列网格中。</p>
    4. <h2>跨列</h2>
    5. <p>从前面的介绍可知,多列容器中…就需要用到column-span属性。</p>
    6. </div>

    如果希望 h2 标题能够横跨所有列,而不使用多列布局,就需要把 column-span属性的值显式设置为 all:

    
    
    1. div {
    2.     -webkit-column-count: 3;
    3. }
    4. div p {
    5.     text-indent: 2em;
    6. }
    7. div h2 {
    8.     background: #ccc;
    9.     -webkit-column-span: all;
    10. }

    上述代码的运行结果如图 9‑8 所示:

    column-span属性效果图9-8 column-span属性效果

    从上图可以看出,h2 标题将文章的内容分成了相互独立的两个部分,每部分依然是一个 3 列布局,而 h2 标题独自横跨三列。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • 设置webkit-column-count:2原来设置float的...明明点击的是第一个,但显示的确实下边一个。 在实际运行中总是点错。 不知该怎么解决 ![图片说明](https://img-ask.csdn.net/upload/201505/09/1431160558_344762.png)
  • 最简单的代码:  .mycode{ width:300px; height:74px; float:left;}   .mycode ul{ width:280px;... .mycode li{ width:100px; float:left; display:block;}     博客小子  博

    最简单的代码:

    <style type="text/css">
        .mycode{ width:300px; height:74px; float:left;}  
        .mycode ul{ width:280px;}  
        .mycode li{ width:100px; float:left; display:block;}  
    </style>
    <div class="mycode">
        <ul>
            <li>博客小子</li>
            <li>博客小子</li>
            <li>博客小子</li>
            <li>博客小子</li>
            <li>博客小子</li>
            <li>博客小子</li>
        </ul>
    </div>

    效果:
    博客小子     博客小子
    博客小子     博客小子
    博客小子     博客小子

    注意:此方法 也为多列,多行,布局的方法。如:

    aaa   aaa   aaa

    aaa   aaa   aaa

    aaa    aaa   aaa

    展开全文
  • 这篇文章主要介绍了CSS实现多行多列的布局的实例代码,需要的朋友可以参考下1.两列多行:HTML:box1:实现两列多行布局111222333CSS:.box1 {width: 500px;background: #EEEEEE;}.box1 ul {clear: both;overflow: hidden...
  • html中 让 ul 的li 在一行内显示

    万次阅读 2016-11-23 13:14:08
    html中 让 ul 的li 在一行内显示
  • ul中li分列显示

    2019-06-29 19:11:57
    让ul中li分列显示,用li显示两列如下(要显视多列的自己想办法,哈哈): 2列 <ul> <li style="display:block;float:left;width:50%"><a href="url">a</a> </li> <li style...
  • CSS如何让li 4个一行显示

    千次阅读 2019-04-24 09:28:53
    我们在做前端开发的时候,或者...有网友问:css 如何控制ul li 每行显示几个并换行 像table效果一样。 今天春哥就给大家讲讲:大家看一下下面的代码,有什么发现: .column .col-4-1 { width: 22.75%; margin-righ...
  • 一行多列的下拉多选框

    千次阅读 2017-12-02 18:49:17
    一行多列的下拉多选框很简单的一行多列的下拉多选框,就当是学习编写jquery插件的例子,该例子依赖jquery相关js代码:/** * 下拉多选插件,支持一行显示过个input框,显示多行 * by liangsu */ (function($){ ...
  • sqlserver 多行转多列实例

    千次阅读 2019-10-13 14:39:08
    查询结果字段介绍:c_ex49是业务员id,tmonth是年-月,tamt是对应月...上图使用多行转多列,效果为: 下面是具体步骤: 然后,执行上面的逻辑后,就由最初的多行变成了多列 最初的: select c_ex49,CONVE...
  • html多列布局

    千次阅读 2021-01-17 15:58:07
    在 html5 中,多列布局中列与列间距是什么属性下面是属性,对比下 column-count 定义元素应该被分隔的列数 column-fill 定义列的填充方式 column-gap 定义列之间的间隔距离 column-rule column-rule属性的简写属性,...
  • HTML- css多列布局

    千次阅读 2015-06-21 23:49:53
    上面的CSS样式是元素中的文本分为3之间的距离为40px,之间用颜色为#ff0000、宽度为4px的线分开。 同样,我们也可以对一些元素中的内容进行排版。 例如我们可以对列表进行排版: 部分代码为...
  • 如何让li居中于ul中间

    千次阅读 2018-09-27 11:04:21
    ul设为display:table;text-align:center; 但记住千万千万不可以设置ul的宽,不然无法实现。
  • 比较分两列或者多列显示: table:你需要在服务器上写一大堆代码判断是不是需要换行,或者切分是不是准确 DIV:你只需要定义好css,剩下的做事情叫交给浏览器吧。 最简单的代码:用ul除以li的宽度=列数 ...
  • 一、首先出现的是比较复杂的一种情况(个key) 1、首先页面显示效果如下   2、后台返回数据格式如下:  3、在iview中table的columns中的render函数:   4、具体代码 render: (h, params) => { ...
  • 实现多列数据显示和隐藏,效果图由于小程序不支持dome操作,因此使用 wx:for 方法实现效果wxml:&lt;!-- searchArray 循环遍历的对象 wx:for-item="item" 别名item bindtap='showList' 绑定点击...
  • li做浮动布局,左右高度不一致会出现错乱 解决: li:nth-of-type(odd){clear:both;} 转载于:https://www.cnblogs.com/ghfjj/p/7337169.html
  • 织梦分页调用横排Li一行显示,解决分页列表显示  最近装了个织梦dedecms V5.7版本时,调用分页显示出现的结果出现好几行,怎么也不能在一排显示,找了很资料,才了解到是由织梦模板中分页加了列表标签,解决有两...
  • 比较分两列或者多列显示:table:你需要在服务器上写一大堆代码判断是不是需要换行,或者切分是不是准确DIV:你只需要定义好css,剩下的做事情叫交给浏览器吧。最简单的代码: XML/HTML代码style type="text/css...
  • 先放一张布局效果效果图在实现这一布局效果时,主要应用了rowspan、colspan跨行和跨的属性布局。在所跨的行或者,在其他行或者中也是占位的。比如:第一项项目基本信息是跨过5行,因此在接下来的4行中,第一...
  • css实现多行多列的布局

    千次阅读 2018-02-28 11:55:00
    1.两列多行: HTML: <div class="box1"> box1:实现两列多行布局 <ul> ...li>111</li> <li>222</li> <li>333</li> </ul> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,455
精华内容 23,782
关键字:

li多列显示