自动生成100个li

span{width:30px;height:30px;background: yellow;position: absolute;display: inline-block;}

#div1{width:350px;height:1000px;background: none;border:1px solid red;}

window.οnlοad=function(){          //window.onload必须写

var btn=document.getElementById('btn');

var span=document.getElementsByTagName('span');

var div1=document.getElementById('div1');

btn.οnclick=function(){

for(var i=0;i<100;i++){

div1.innerHTML+=''+ i +'';

}

for(var i=0;i<100;i++){

if(i%10==0){

span[i].style.left=10+i*40+"px"+'
';

}else {

span[i].style.left=10+i*40+"px";

}

}

}

//每10个换行

}

点击变化

html多个span平均分布各行,往div里面加100个span 每10个换行 换行怎么换啊相关推荐

  1. 标签宽度确定,让文字在标签内平均分布

    标签宽度确定,让文字在标签内平均分布 <div class="basic-info"><div class="basic-info__username& ...

  2. 实现一个行内三个div等分_一个div,包含三个小的div,平均分布的样式

    从11月份开始,自学前端开发,写静态页面中,经常用到一个大的div下包含三个小的div,平均分布div大小样式,写过多次,也多次忘记,每次都要现找资料,不想之后,在这么麻烦,索性今天自己记录一下,方便 ...

  3. 自动布局按钮排列平均分布

    需要实现如下图所示的主页面布局,需要两排按钮,每一排都自动平均分布,Android的话直接用LinearLayout水平布局,并设置layout_weight即可,对于iOS,网上有使用代码实现,感觉 ...

  4. html怎么让导航栏平均分布,CSS 怎么让按钮平均分布

    CSS 怎么让按钮平均分布 等分布局是指子元素平均分配父元素宽度的布局方式, 本文将介绍实现等分布局的 4 种方式 一, float 缺点: 结构和样式存在耦合性, IE7 - 浏览器下对宽度百分比取 ...

  5. Grid平均分布自动换行

    前言:当我们在布局商品列表的时候,需要平均分布和自动换行功能,在此使用grid简单快捷布局实现该功能,这里以微信小程序为例. wxml部分 <view class="container ...

  6. flex平均分布换行后自动对齐

    目的效果: 如何可以使用flex布局 进行平均分布,又可以换行呢? 我最开始是这样做的: display: flex;display: -webkit-flex;justify-content: sp ...

  7. Android开发之约束布局平均分布|ConstraintLayout平均分布|约束布局均匀分布|ConstraintLayout均匀分布

    老路子先看效果图 1.先画7个小球会全部重叠在一起 <?xml version="1.0" encoding="utf-8"?> <andro ...

  8. TD数量不确定时如何让其宽度平均分布

    D数量不确定时如何让其宽度平均分布? 答案很简单,我们只要在table里面加上一下代码就可以实现. table { width: 100%; table-layout: fixed; } 转载于:ht ...

  9. RecyclerView addItemDecoration 的妙用 - item 间距平均分布和添加分割线

    前言 RecyclerView,在开发当中使用非常频繁的一个控件,今天,主要讲解以下两个问题 添加分割线 item 间距的平均分布 文章目录如下 addItemDecoration 方法简介 如何添加 ...

  10. java gridlayout 权重_用代码实现GridLayout平均分布样式

    本人发帖宗旨: 1.不长篇大论. 2.发文前简单搜一下是不是有人发过(简单的). 3.直说知识点,基础知识请自行补习. 4.随性 前提:使用android.support.v7.widget.Grid ...

最新文章

  1. 上班第一天公司就倒闭了??? | 每日趣闻
  2. CentOS5.5环境下布署LVS+keepalived
  3. PyQt的Layout的比例化分块。
  4. vue双向绑定原理源码解析
  5. 【easyui】treegrid逐级加载源码
  6. 风控建模 python 知乎_风控建模基本要求及面试问题小结
  7. YOLOv3实现鱼类目标检测
  8. 硅谷大佬提前剧透未来!6本书,助你走在AI时代前沿
  9. 翼支付和银行网络连通准备
  10. 超 6 万的微软工程师是如何进行代码审查的?| CSDN 博文精选
  11. 阿里测试人员:8年经验分享自学软件测试学习路线
  12. CSS三角制作(HTML、CSS)
  13. Unity 中的特殊文件夹
  14. C# 关键字--using
  15. 什么是P2P和它的应用
  16. 使用 Burp Suite 暴力破解密码 撞库攻击 从0到1手摸手教学
  17. 页面打印不全怎么办html css,win7打印网页显示不全怎么办|win7设置网页打印页面的方法...
  18. PATA1034题解
  19. 杭电oj题目题型分类(转)
  20. 网络攻防——Goby+AWVS漏洞扫描

热门文章

  1. p6spy 非常典型 启用SQL日志
  2. mysql错误代码1813_MSSQL2000数据库附加错误1813解决方案
  3. linux 程序设置快捷方式,Linux中设置程序的桌面快捷方式
  4. 计算机不能上网查找原因的步骤,电脑能连接上wifi但不能上网的原因_电脑能连接上wifi但不能上网的解决方法...
  5. 花音机器人_【扑杀花音攻略组】超弩风机器人攻略(复刻x2)
  6. Teigha 40010 保存设置Wipeout时的边界显示问题
  7. dropbox 、tombstones、debuggred
  8. 贴片晶振的脚位方向如何区分
  9. 深度学习中的多任务学习介绍
  10. linux服务器测网速,linux服务器如何测试网速?