span属于内联元素，因此width对内联元素不起作用。

需要设置display:inline-block;使其成为内联级块级元素；

border不起作用，主要是未设置border-style:solid 导致。

border: 1px solid red;

span width不起作用，border 无效的更多相关文章

  1. height:100%不起作用（无效），div全屏

    当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...

  2. CSS3 盒模型---css初始化会用到：box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

    CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...

  3. span width无效

    在默认情况下label.span 设置width 是无效的.一般要display属性 display:block; 但是他会自动加一个换行,如果不想换行的话,可以用 display:inline-bl ...

  4. html style的width不起作用

    一. 有些元素的默认情况下没有长度属性的,所以在其style内指定width属性是不会起作用的. 应对措施:使其浮动,float:left/right,浮动的元素长度和宽带都默认是0的,需要指定长度和 ...

  5. 关于表格元素的使用，table、<width>、<heigh>、<border>、<tr>、<th>、<td>、<align>、<colspan>、<rowspan>

    <html>    <head>        <meta charset="UTF-8">        <title>个人简历& ...

  6. tr设置border无效的解决方法

    给table的css添加属性:border-collapse: collapse; 边框不折叠的表格 行,列,行组是不具有border的

  7. 使用flex布局解决百分比高度元素垂直居中

    方法一: align-self(解决父元素下面单个子元素布局方式) 父级加上 div{display:flex} 子元素 span { flex-grow: 1; align-self: center ...

  8. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  9. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

随机推荐

  1. stenciljs 学习三 组件生命周期

    stenciljs 组件包含好多生命周期方法, will did load update unload 实现生命周期的方法比价简单类似 componentWillLoad ....,使用typescr ...

  2. 看懂Class文件的装载流程

    Class文件的加载过程 ClassLoader的工作模式 类的热加载 1 Class文件的装载流程 只有被java虚拟机装载的Class类型才能在程序中使用(注意装载和加载的区别) 1.1 类装载的 ...

  3. 【转】每天一个linux命令（35）：ln 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/11/2812294.html ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一 ...

  4. jmeter—打开jmx报com.thoughtworks.xstream.converters.ConversionException

    打开出错的jmx文件,查看出错行 由于缺少PerfMon Metrics Collector插件,所以报这个错误 下载地址(https://jmeter-plugins.org/downloads/a ...

  5. C#利用zxing.net操作二维码和条形码

    下载地址:http://zxingnet.codeplex.com/ zxing.net是.net平台下编解条形码和二维码的工具,使用非常方便. 首先下载二进制dll文件,引入工程: 代码: usin ...

  6. windows下使用vscode编写运行以及调试Python

    更新于2018年10月: 首先去python官网下载python3  地址:https://www.python.org/downloads/windows/ 下载好后直接安装 记得勾选添加环境变量 ...

  7. bzoj 2516: 电梯

    Description Input Output 状压dp,状态表示为表示当前在第x层,电梯内有哪些人,哪些人还没到终点 #include<cstdio> #include<cstr ...

  8. $(function(){}) ，$(document).ready(function(){})，window.onload = function(){...}，$(window).load(function(){...})区别

    1. 写法:      $(function(){}) ,$(document).ready(function(){})是一样的 2. 时间: window.onload和$(window).load ...

  9. jquery对象和javascript对象的console.log结果

    array.push($("div").children("label")); console.log(array); 输出: 这个是jquery对象,如果在选 ...

  10. 关于DELL服务器如果采购散件，进行服务器升级的相关说明

    拿DELL服务器内存来说明这个情况,其他硬盘等等是 一样的: 1.DELL服务器的内存散件,从购买之日起,质保期是一年: 2.但是如果你把内存插到能兼容这个内存的服务器上去使用,请注意我的字眼,是能兼 ...