`

如何设置<span>的width margin 属性且不换行

 
阅读更多

span标记的样式设定width属性,会发现不会产生效果。

如果设置display:block,width属性生效,但是此时的span跟div一样了。
如果设置display:inline-block,则span并列在同行,而且width属性生效。

元素display属性的常见值说明:

block:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。
inline:内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行。
inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
non:隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间。

分享到:
评论

相关推荐

    昨日测试题答案 大家可以对照下

    大型数据提交通常使用POST方法,`input`标签不能直接用`width`属性设置宽度,`p`标签不能包含`h1`等标题标签。 4. 简答题部分,要求总结HTML标签及其默认样式,这包括但不限于:`&lt;p&gt;`段落,`&lt;h1&gt;`至`&lt;h6&gt;`标题,`...

    HTML常用标签及属性.pdf

    * `&lt;span&gt;`:定义了一个行内容器标签。 常用属性 * `src`:定义了资源的位置。 * `border`:定义了边框的宽度。 * `size`:定义了元素的尺寸。 * `width`:定义了元素的宽度。 * `height`:定义了元素的高度。 * `...

    html5学习资料

    常用的内容标签有:`&lt;a&gt;` 用于链接,`&lt;div&gt;` 和 `&lt;span&gt;` 作为布局和文本容器,`&lt;b&gt;` 和 `&lt;i&gt;` 用于加粗和斜体,列表标签 `&lt;ul&gt;`、`&lt;li&gt;`,定义列表 `&lt;dl&gt;`、`&lt;dt&gt;`、`&lt;dd&gt;`,图像标签 `&lt;img&gt;`,媒体标签 `&lt;video&gt;`...

    网页制作课程

    - **`&lt;head&gt;`标签**:该标签中的内容不直接显示在网页上,用于设置页面的元信息,如标题、引入外部文件等。 - **`&lt;title&gt;`**:设置网页标题。 - **引入CSS和JavaScript文件**:通过`&lt;link&gt;`和`&lt;script&gt;`标签实现。...

    web最终版本.docx

    * 块元素:`&lt;div&gt;、&lt;p&gt;、&lt;h1&gt;...&lt;h6&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;table&gt;、&lt;form&gt;`,独占一行,元素的 height、width、margin、padding 都可设置 * 行内元素:`&lt;span&gt;、&lt;a&gt;`,不单独占用一行,元素宽和高不可改变 * 浮动属性:`...

    经常使用的html标签!

    24. `&lt;form&gt;`: 创建表单,`action`属性指定处理表单数据的URL,`method`属性设置数据发送方式(GET或POST)。 25. `&lt;frame&gt;`: 用于创建框架集中的子窗口,`margin*`属性调整边距,`noresize`阻止用户调整大小,`...

    Html和css学习简易教程

    - `&lt;span&gt;`:用于定义文档中的小块文本。 - `&lt;code&gt;`:用于定义计算机代码。 - `&lt;iframe&gt;`:用于嵌入另一个文档,通常是网页的一部分。 - `&lt;video&gt;`:用于嵌入视频。 - `&lt;audio&gt;`:用于嵌入音频。 - `&lt;a&gt;`:用于创建...

    常用HTML代码速查表.doc

    43. `marginwidth` 和 `marginheight`:设置框架的边距。 44. `&lt;NOBR&gt;`:阻止文本自动换行。 45. `&lt;NOFRAMES&gt;`:在不支持框架的浏览器中显示的内容。 46. `name`:创建书签或锚点,用于内部链接。 47. `no`:在...

    行内元素和块级元素 displayDemo.html

    例如,将`&lt;span&gt;`元素的`display`属性设置为`block`,它就会表现得像一个块级元素;而将`&lt;div&gt;`元素的`display`属性设置为`inline`,则它会像行内元素一样显示。 4. 使用场景 - 行内元素适合用于文本修饰或小型...

    关于DIV的各种样式

    与其他行内元素(如`&lt;span&gt;`)不同,`&lt;div&gt;`默认会占据整个宽度,并在前后自动换行,这就为构建复杂的页面结构提供了基础。 当我们谈论`&lt;div&gt;`的样式时,通常会涉及到CSS(层叠样式表)。CSS允许我们对`&lt;div&gt;`进行...

    利用HTML实现一个个人信息表的网页.docx

    行内标签如`&lt;span&gt;`, `&lt;strong&gt;`, `&lt;a&gt;`, `&lt;img&gt;`, `&lt;input&gt;`, `&lt;textarea&gt;`,它们通常用于控制文本的显示,不会自动换行,只占据自身内容所需的空间。而块级元素如`&lt;p&gt;`, `&lt;h1&gt;-&lt;h6&gt;`, `&lt;hr&gt;`, `&lt;pre&gt;`, `&lt;ul&gt;`, `...

    前端学习路线推荐+自己做的一个前端项目(旅游线路推广)+通过购买腾讯云服务器上传的个人经历(附带部分关键源码)

    - **段落与换行**: `&lt;p&gt;`标签用来定义一个段落,而`&lt;br /&gt;`标签则用于实现换行。 - **文本样式**: 若要使文本加粗,可以使用`&lt;strong&gt;`或`&lt;b&gt;`标签;想要斜体效果,则使用`&lt;em&gt;`或`&lt;i&gt;`标签;`&lt;del&gt;`或`&lt;s&gt;`可添加...

    Javascript知识点汇总.pdf

    9. **多行文本框**:`&lt;textarea&gt;`元素用于创建多行文本输入框,可以通过`rows`和`cols`属性设置大小。 10. **只读和禁用属性**:`readonly`属性使输入元素只读,用户不能修改其内容;`disabled`属性使元素失效,...

    导航栏代码[借鉴].pdf

    内容块状元素(如`&lt;div&gt;`)占据整行宽度,可以设置宽度、高度等属性;而内联元素(如`&lt;span&gt;`)则按需占用空间,不会自动换行。在布局中,盒子模型(Box Model)是关键,它包括元素的内容区域、内边距、边框和外边距...

    CSS参考手册_第5章__CSS基本布局属性

    - **默认行为**:内联元素(如`&lt;span&gt;`)默认在同一行显示,直到它们的宽度超过其父容器的宽度才会自动换行。 - **示例代码**: ```html &lt;style&gt; .span1 { background-color: #999999; color: #000000; font-size...

    随手记的div+css的小抄代码

    - `&lt;br/&gt;`: 行内换行,用于强制换行而不形成新的段落。 - `&lt;span&gt;`: 行内容器,常用于应用样式或脚本操作。 3. **列表标签:** - `&lt;ul&gt;` 和 `&lt;li&gt;`: 无序列表及其列表项。 - `&lt;ol&gt;` 和 `&lt;li&gt;`: 有序列表及其...

    h5day2.docx

    ... ... ... ...##### 1....行级元素通常在同一行内显示,多个标签之间不会自动换行。...- `&lt;span&gt;`:常用于添加特定样式的文本。...同时,掌握表格的基本用法和属性设置,可以帮助我们在实际项目中更加高效地组织和展示数据。

    DIV+CSS网页布局基础-常用HTML标签介绍

    8. `&lt;br&gt;`:换行,用于在文本中强制换行。 9. `&lt;hr&gt;`:水平线,用于在内容之间划出一条分隔线。 在`DIV+CSS`布局中,`CSS`的作用至关重要。它通过选择器(如类名、ID、元素选择器等)找到对应的HTML元素,并设定其...

    网页设计与制作(HTML+CSS).docx

    9. 定义列表语法:`&lt;dl&gt;&lt;dt&gt;名词1&lt;/dt&gt;&lt;dd&gt;名词1解释1&lt;/dd&gt;&lt;dd&gt;名词1解释2&lt;/dd&gt;...&lt;dt&gt;名词2&lt;/dt&gt;&lt;dd&gt;名词2解释&lt;/dd&gt;...&lt;/dl&gt;`是定义列表的基本格式。 10. 选择器书写:后代选择器如`p span`表示选择`&lt;p&gt;`元素内的...

Global site tag (gtag.js) - Google Analytics