圆点html span,HTML <span>局部布局标签

HTML 局部布局标签

在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。一般使用在文字的处理方面居多。

案例

我在地球，来自中国

我在地球，来自中国

span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

span与div区别

在CSS定义中属于一个行内元素，而

是块级元素，span随内容而占用高宽空间(紧贴内容)，而一对div标签却占用一行。我们可能通俗地理解为

为大容器，大容器当然可以放一个小容器了, 就是小容器。

span布局

利用span标签和css实现单行文字和时间两端对齐。

html>

炫代码(www.xuandaima.com)

ul,li{ padding:0; margin:0;list-style:none; }

ul{ width:400px; padding:10px;border:1px solid #000}

ul li{ line-height:30px; height:30px; text-align:left}

ul li a{ float:left; width:300px; height:30px; overflow:hidden}

ul li span{ float:right}

• PHP教程列表2019-07-11
• HTML教程列表2019-07-07

代码解释ul,li{ padding:0; margin:0;list-style:none; }

确定ul和li默认CSS样式，比如li前面间隔与无序圆点效果ul{ width:400px; padding:10px;border:1px solid #000}

便于观察效果对ul设置宽度和边框，设置padding避免内容与Ul太紧贴。ul li{ line-height:30px; height:30px; text-align:left}

设置Li高度，和内容垂直居中，设置内容靠左显示ul li a{ float:left; width:300px; height:30px; overflow:hidden}

对li里的li a设置靠左浮动，设置宽度和高度，以及设置隐藏超出宽度高度的内容。避免内容溢出ul li span{ float:right}

对span设置靠右浮动

支持浏览器

全局属性

标签支持HTML 全局属性

事件属性

标签支持HTML 事件属性