table中的td可以在页面中直接在元素上设置width;但是li不能只能在页面中写style;

  1. <!-- <li width="20%" class="p-box">1</li>
  2. <li width="20%" class="t-box">2</li>
  3. <li width="20%" class="m-box">3</li>
  4. <li width="20%" class="o-box">4</li>
  5. <li width="20%" class="st-box">5</li> -->
  6. <li :style="{width:personData.t}" class="p-box">1</li>
  7. <li :style="{width:personData.t}" class="t-box">2</li>
  8. <li :style="{width:personData.t}" class="m-box">3</li>
  9. <li :style="{width:personData.t}" class="o-box">4</li>
  10. <li :style="{width:personData.t}" class="st-box">5</li>

注释的是错误的方式,只有在td中可直接使用

width百分比的更多相关文章

  1. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  2. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  3. Python 【第七章】:Html 和 CSS

    HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标 ...

  4. transition代替简单的animation注意事项

    一. transition 和 animation  不支持    Internet Explorer 9,以及更早的版本. 二. 要变化的属性 transition-property:要变化的属性, ...

  5. css-九宫格自适应的实现

    高度自适应使用padding 或 padding-bottom + 百分比来实现: 宽度自适应使用width + 百分比来实现. 下面是实现九宫格自适应的代码: <!DOCTYPE html&g ...

  6. 关于inline-block的间隙问题

    很久之前写过一个星星评级的样式,当时开发人员在嵌套代码的时候出现很多问题,同样的一个样式有的页面正常有的页面就出现星星错位的问题,仔细研究了一下代码,发现问题原来出在了inline-block上. 目 ...

  7. css3动画(transition)属性探讨

    在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...

  8. 《CSS那些事儿》读书笔记

    注: 此书出版于2009年,所以有些知识...你懂得. 有些我熟悉的知识点,就没有记录下来了,所以想了解更多的细节,还是去看下此书吧. 暗灰色标记部分,是我自己的理解,有不对或要补充的地方,还请大家多 ...

  9. CSS3 Transitions

    浏览器支持 属性 浏览器 transition Internet Explorer不支持过渡属性. Firefox4需要前缀-moz-. Chrome和Safari需要前缀-webkit-. Oper ...

随机推荐

  1. English trip -- Phonics 5 元音字母 o

    Vowel 元音 元音 O Consonant 辅音 清辅音   h    wh 浊辅音  m    wh  n   ng   y oa:[əʊ]  # 字母本身音 coat boat load co ...

  2. Vue.js Cookbook: 添加实例属性; 👍 axios(4万➕✨)访问API; filters过滤器;

    add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...

  3. android------2018 年初值得关注的 16 个新 Android 库和项目

    1. transitioner Transitioner 是一个为两个拥有嵌入子视图的视图之间提供简便.动态且可调整的动画效果的库.它纯 100% 使用 Kotlin 编写而成,使用 MIT 许可,且 ...

  4. ajax思维导图

  5. homestead 暴露接口到外网

    laravel 官方推荐的运行环境是homestead,但homestead是个虚拟机,你自己访问没问题,给别人联调怎么办? 一个大型项目肯定不止一个人开发,这个时候就需要将你虚拟机上的接口暴露给外网 ...

  6. (转)(HR面试)最常见的面试问题和技巧性答复

    (HR面试)最常见的面试问题和技巧性答复 1.请你自我介绍一下你自己? 回答提示:一般人回答这个问题过于平常,只说姓名.年龄.爱好.工作经验,这些在简历上都有.其实,企业最希望知道的是求职者能否胜任工 ...

  7. SSH 远程端口转发

    既然"本地端口转发"是指绑定本地端口的转发,那么"远程端口转发"(remote forwarding)当然是指绑定远程端口的转发. 还是接着看上面那个例子,ho ...

  8. .net 中struct(结构)和class(类)的区别

    1.struct 结构与class(类)的区别 1)struct是值类型,class是对象类型 2)struct不能被继承,class可以被继承 3)struct默认访问权限是public,而clas ...

  9. 3DES加密解密

    C#3DES加密解密,JAVA.PHP可用 using System; using System.Security.Cryptography; using System.Text; namespace ...

  10. 获取URL中的链接(可中文也可英文)

    //既能获取中文url也能英文function getUrlParam(key) { // 获取参数 var url = window.location.search; // 正则筛选地址栏 var ...