让div内的span在一行显示
只需把span的style.display设置成inline-block就行了.
div 是block元素,默认自动换行,须转换成span的inline元素或者加display:inline;转换成行内元素,或者用float:left;自动转换成inline-block元素
- 浏览: 1053534 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1441)
- 软件思想&演讲 (9)
- 行业常识 (250)
- 时时疑问 (5)
- java/guava/python/php/ruby/R/scala/groovy (213)
- struct/spring/springmvc (37)
- mybatis/hibernate/JPA (10)
- mysql/oracle/sqlserver/db2/mongdb/redis/neo4j/GreenPlum/Teradata/hsqldb/Derby/sakila (268)
- js/jquery/jqueryUi/jqueryEaseyUI/extjs/angulrJs/react/es6/grunt/zepto/raphael (81)
- ZMQ/RabbitMQ/ActiveMQ/JMS/kafka (17)
- lucene/solr/nuth/elasticsearch/MG4J (167)
- html/css/ionic/nodejs/bootstrap (19)
- Linux/shell/centos (56)
- cvs/svn/git/sourceTree/gradle/ant/maven/mantis/docker/Kubernetes (26)
- sonatype nexus (1)
- tomcat/jetty/netty/jboss (9)
- 工具 (17)
- ETL/SPASS/MATLAB/RapidMiner/weka/kettle/DataX/Kylin (11)
- hadoop/spark/Hbase/Hive/pig/Zookeeper/HAWQ/cloudera/Impala/Oozie (190)
- ios/swift/android (9)
- 机器学习&算法&大数据 (18)
- Mesos是Apache下的开源分布式资源管理框架 (1)
- echarts/d3/highCharts/tableau (1)
- 行业技能图谱 (1)
- 大数据可视化 (2)
- tornado/ansible/twisted (2)
- Nagios/Cacti/Zabbix (0)
- eclipse/intellijIDEA/webstorm (5)
- cvs/svn/git/sourceTree/gradle/jira/bitbucket (4)
- jsp/jsf/flex/ZKoss (0)
- 测试技术 (2)
- splunk/flunm (2)
- 高并发/大数据量 (1)
- freemarker/vector/thymeleaf (1)
- docker/Kubernetes (2)
- dubbo/ESB/dubboX/wso2 (2)
最新评论
发表评论
-
a标签置灰不可点击
2017-08-25 10:08 1182a标签的title属性可以实现鼠标放上去显示信息的功能 ... -
jsf中xhtml文件访问
2016-12-11 23:12 624web.xml中的配置: ? 1 ... -
webpack 入门指南
2016-09-30 15:12 571什么是 webpack? webpack是近期最火的一款 ... -
用css 添加手状样式,鼠标移上去变小手,变小手
2016-08-16 14:25 1922用css 添加手状样式,鼠标移上去变小手,变小手 curso ... -
css学习3
2016-07-07 11:16 497一、概述 除了正常运 ... -
block,inline和inline-block概念和区别
2016-06-24 19:53 576总体概念 1.block和inline ... -
css 的学习1
2016-06-20 19:32 375css 中的 transparent到底是什么意思 透明的 ... -
标签<noscript>
2016-05-25 11:13 505<noscript> <iframe s ... -
CSS技术
2016-05-13 16:13 476padding是内边距 margin是外边距 一、CSS ... -
CSS原理与CSS经验分享
2016-05-13 15:52 422一、浏览器的发展与CSS ... -
html上显示默认值
2016-01-29 14:07 649使用onfocus事件检查当前值,如果是默认值,就将val ... -
html
2016-01-27 22:10 414html通常指的是用来写网页的超文本代码,HTML5只是HT ... -
html中化柱状图,折线图
2016-01-27 20:36 790<!DOCTYPE HTML PUBLIC " ... -
css学习
2015-12-07 23:38 337CSS(层叠样式表)是一种简单的设计语言,能够将页面变漂亮这回 ... -
ionic
2015-11-30 01:18 691PhoneGap是一个用基于HTML,CSS和JavaScri ... -
bootstarp基本CSS样式
2015-11-26 15:30 782路径: http://bootstrap.kinghack.c ... -
css的学习
2015-11-26 01:34 338学习css http://t.mb5u.com/css3/ -
如何在网页中循环播放声音
2015-08-06 23:48 818HTML中可以播放声音的标签有bgsound、embed、au ...
相关推荐
就类似说空间里面模块中模块名靠左,编辑字样出现在靠右,一般思路的话一定是认为通过分开两列,一个align=...这个时候就发现出现一个问题“文章”跟“编辑”不在同一行中!这下苦闷了!于是只好去搜了问题原因如下
- 内联元素不会独自占用一行,多个内联元素可以在一行内连续显示。 - 不能设置宽度和高度,但可以设置颜色、字体大小等样式属性。 - 常见的内联元素有:`<span>`, `<a>`, `<strong>`, `<em>` 等。 #### 三、示例...
1. 块级元素与行内元素:在CSS布局中,`<div>`作为块级元素,它默认占据整个宽度,新的一行开始。而行内元素(如`<span>`)则只占据其内容的宽度。通过调整元素类型,我们可以控制元素的排列方式。 2. 浮动布局:CSS...
在CSS中,我们使用浮动(float)属性来让标题和日期显示在同一行上。我们将标题设置为左浮动,日期设置为右浮动。 .lbt { float: left; margin-right: 10px; } .ldt { float: right; margin-left: 10px; } 三...
3. **内联元素与块级元素**: DIV默认为块级元素,占据整行,而内联元素(如`<span>`)则在同一行显示。 4. **层叠**: 当多个CSS规则应用于同一个元素时,通过层叠顺序(CSS specificity)确定最终样式。 综上所述,...
span和div的不同之处在于span是内联的,用在一小块的内联HTML中,而div(想想division是什么意思)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码。 <div id="sciss
- **display**: 设置为 `block`,使其占据一行。 - **background**: 设置背景颜色。 - **overflow**: 设置为 `hidden`,用于隐藏超出的内容。 - **border**: 设置边框。 - **margin**: 控制边框之间的间距。 -...
1. 块级元素与行内元素:`DIV`作为块级元素,可以独占一行,而行内元素如`span`则可以并排显示。通过`display`属性,可以相互转换这两种元素的类型。 2. 定位:`CSS`提供了绝对定位(`position: absolute`)、相对...
而块级元素为一个块状,单独占据一行,相当于在一个该元素前后各加一个换行。 两者最明显的区别是:DIV(division)是一个块级元素,可以包含段 落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,...
`<span>`标签则与`<div>`不同,它是一个内联元素,用于在一行文本中划分区域,不会引起新的行。`<span>`的使用方法与`<div>`相似,但不会自动换行。 在CSS中,盒模型是理解元素尺寸和布局的关键。每个HTML元素都...
2. **div与span的区别**:`div`是块级元素,独占一行,`span`是内联元素,与其他内联元素并排显示。 3. **边距与内填充**:`margin`用于调整元素的外边距,`padding`用于调整元素的内填充。 4. **颜色值缩写**:颜色...
在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略号代替: 思想为: 首先设置宽度,然后让超出的部分隐藏 如果有超出则在最后显示省略号 让文本不换行 具体css代码为: 复制代码代码如下:.title{...
当然你也可以把下面一段代码去掉,只留这一行。<p align="center"> 本 特 效 由 <a href="http://www.CsrCode.cn"> 芯 晴 网 页 特 效 </a> 丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。 </...
#### 一、CSS与DIV概述 **CSS+DIV技术**是现代Web前端开发中非常核心的技术之一,它主要用于网站的页面布局和样式的美化。其中,CSS代表层叠样式表(Cascading Style Sheets),用于定义HTML文档的视觉表现;而DIV则...
- 块级元素:默认独占一行,如`<p>`、`<div>`等。 - 内联元素:和其他元素在同一行显示,如`<span>`、`<a>`等。 - 内联块元素:具有块级元素的某些特性,同时又能在同一行显示多个元素。 - **如何学习CSS**: -...
2. **块级元素与行内元素**:`div`默认为块级元素,占据整行,可以调整宽度、高度,而行内元素(如`<span>`)则在一行内显示。 3. **定位**:通过`position`属性(static、relative、absolute、fixed),`top`,`...
** - 这是一种混合型,元素表现得像内联元素,但允许设置宽度、高度和内外边距,同时可以在一行内显示多个此类元素。 最后,对于一个li元素内的span元素,若希望它靠右对齐且不换行,可以使用绝对定位。例如: ```...
- 浮动布局(Float Layout):通过`float`属性让元素在容器内浮动,常用于创建多列布局。 - 定位布局(Positioning):通过`position`属性(如`static`、`relative`、`absolute`、`fixed`)来精确控制元素的位置。...