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. Android开发中需要注意哪些坑

    作为一个有两.三年Android应用开发经验的码农,自然会遇到很多坑,下面是我能够想起的一些坑(实践证明不记笔记可不是个好习惯),后面有想到其它坑会陆续补上. 1.在Android library中不 ...

  2. python-day20--collections模块

    1.namedtuple: 生成可以使用名字来访问元素内容的tuple >>> from collections import namedtuple >>> Poi ...

  3. spring boot 基础篇 -- 自带图片服务器

    我们平时在日常项目中经常会遇到图片的上传和访问的情景,平时我们可能习惯于把图片传到resource或者项项目中的某个位置,这样会有一个缺点,当我们重新项目打包时,这些图片会丢失.为了解决这一缺点,我们 ...

  4. 关于InputStream类的available()方法

    要一次读取多个字节时,经常用到InputStream.available()方法,这个方法可以在读写操作前先得知数据流里有多少个字节可以读取.需要注意的是,如果这个方法用在从本地文件读取数据时,一般不 ...

  5. 在Eclipse中Attach Source

    在Eclipse中,有时需要查看类.方法和变量的声明和定义的源代码. 但是在F3查看一些在JDK库中声明/定义的类.方法和 变量的源代码时,Eclipse给你打开的却是相应的.class文件(byte ...

  6. Goolge全球各国域名大全

    搜索过技术文章的朋友都知道,Google的搜索功力绝对是世界第一,仅仅搜索中文还体现不出Google的功力,如果大家是做外贸或者搜索其它语言的文章,就会知道Google的内涵有多少了.全世界的国家Go ...

  7. oracle不小心更新了数据库中的所有内容后的恢复

    开发过程中,在更新数据库中的某一条数据时,由于疏忽忘记加where判断条件了,这时更新会提示是否要更新全部数据,但是由于自己没有仔细看提示导致直接点确定并commit了,导致数据库中所有数据的相关字段 ...

  8. JavaScript事件漫谈

    内容概要: event对象,事件在多个浏览器中的兼容,事件的传播机制,JS自定义事件,jQuery的自定义事件的绑定与触发 Event对象 Event对象属于HTML DOM对象.Event 对象代表 ...

  9. php 文件上传处理

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS4AAACvCAIAAADMuaTdAAAcaklEQVR4nO2da3Abx33Az3H6JdNx2i

  10. django2 删除图片或其他

    首先从数据库中获取图片的名称,然后拼接图片的物理地址,最后就是删除. # 物理删除图片 d = os.path.dirname(os.path.dirname(os.path.abspath(__fi ...