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

<!-- <li  width="20%" class="p-box">1</li>

                    <li  width="20%" class="t-box">2</li>

                    <li  width="20%" class="m-box">3</li>

                    <li  width="20%" class="o-box">4</li>

                    <li  width="20%" class="st-box">5</li> -->

                    <li  :style="{width:personData.t}" class="p-box">1</li>

                    <li  :style="{width:personData.t}" class="t-box">2</li>

                    <li  :style="{width:personData.t}" class="m-box">3</li>

                    <li  :style="{width:personData.t}" class="o-box">4</li>

                    <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 M1 - PC12 I'd Like a Room Please Teacher:Taalan

    In this lesson you will learn to say what you need. 在本课中,您将学习如何说出您的需求. Words list elevator  电梯      ...

  2. English trip -- VC(情景课)1 C What's your name?（review）

    Xu言: 今天,阴差阳错又上了一次 VC 1 C的课,不过这次是小班的形式.这次课的教室叫 toronto   [təˈrɒntəʊ]  to ron to (多伦多(加拿大城市))   - -0我还 ...

  3. 20170612xlVBA多文件多类别分类求和匹配

    Public Sub Basic_CodeFrame() AppSettings 'On Error GoTo ErrHandler Dim StartTime, UsedTime As Varian ...

  4. 玲珑杯 ACM热身赛 #2.5 A 记忆化搜索+瞎搞

    #include <cstdio> #include <vector> #include <iostream> #include <algorithm> ...

  5. Confluence 6 配置 LDAP 连接池

    当 LDAP 连接池被启用后,LDAP 目录服务器将会维护一个连接池同时当必要的时候指派他们.当一个连接关闭后,这个连接将会放回到连接池中供以后进行使用.这种设置将会有效的提高系统性能. 希望配置 L ...

  6. python-day6---运算符

    #了解部分#字符串+,*#列表:+,*# l1=[1,2,3]# l2=[4,5]## print(l1+l2)# print(l1*3) #比较运算符# num1=3# num2=1 # print ...

  7. dp练习（3）——棋盘问题

    设有一个n*m的棋盘(2≤n≤50,2≤m≤50),如下图,在棋盘上有一个中国象棋马. 规定: 1)马只能走日字 2)马只能向右跳 问给定起点x1,y1和终点x2,y2,求出马从x1,y1出发到x2, ...

  8. spring-mvc---Controller参数绑定的类型

    Controller参数绑定的类型 Controller的绑定参数类型6种.没有参数(系统默认类型):简单类型(Intager,Double)等:pojo类(对象):数组:集合:HashMap等. 我 ...

  9. [LeetCode] 268. Missing Number ☆(丢失的数字)

    转载:http://www.cnblogs.com/grandyang/p/4756677.html Given an array containing n distinct numbers take ...

  10. Mac下的nodeJs版本切换和升级

    在我们开发多个项目的时候,因为框架支持的node版本不同,所以要切换多个node版本 首先我们要使用npm安装一个模块 n 的全局 1.npm  install  -g  n 2.使用 n 加版本号就 ...