html中怎么让两个标签不换行?

html-css06

html中怎么让两个标签不换行?,第1张

1.

html中有两类元素(也就是标签),block和inline。

2.

block类型的标签默认情况下会在两边自动加上换行。而inline则不会。

3.

表格属于block类型的,所以它会跳到下一行。要想让它不自动换行可以设置它的css样式display属性的值为inline.

4.

如<body>

这是前面的文字<table

style="display:inline"><tr><td>这是表格里的内容

</td></tr></table>

</body>

html

强制不换行标签元素:

1.

可以用nobr标签来实现。

2.

nobr语法

<nobr>内容</nobr>

不换行内容放入<nobr>与</nobr>之间即可。

此标签与css

white-space功能相同。

3.

nobr标签特点:如不遇到br换行标签,内容在一行显示完,如遇到br换行标签,内容将在加br换行自动换行。

4.

html

nobr禁止内容换行案例:

这里假如有4行文章标题列表,设置宽度为200px;css行高为22px;对4列的内容我们采用ul

li列表布局,其中2个对内容加<nobr>标签,一个li内容不加,另外一个li内容少与宽度能显示完。

a - 锚点;

abbr - 缩写;

acronym - 首字;

b - 粗体(不推荐);

bdo - bidi override;

big - 大字体;

br - 换行;

cite - 引用;

code - 计算机代码(在引用源码的时候需要);

dfn - 定义字段;

em - 强调;

font - 字体设定(不推荐);

i - 斜体;

img - 图片;

input - 输入框;

kbd - 定义键盘文本;

label - 表格标签;

q - 短引用;

s - 中划线(不推荐);

samp - 定义范例计算机代码;

select - 项目选择;

small - 小字体文本;

span - 常用内联容器,定义文本内区块;

strike - 中划线;

strong - 粗体强调;

sub - 下标;

sup - 上标;

textarea - 多行文本输入框;

tt - 电传文本;

u - 下划线;

var - 定义变量。

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。

行内、块状元素区别:

块级元素会独占一行,其宽度自动填满其父元素宽度,行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化。

一般情况下,块级元素可以设置 width, height属性,行内元素设置width,  height无效(注意:块级元素即使设置了宽度,仍然是独占一行的)块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)

可以通过display:

inline-block设置为行内元素。

步骤如下:

一、设计两个块级元素div,代码如下:

此时的块级元素显示效果:

二、设计两个块级元素div,添加属性 display:inline-block,代码如下:

此时的元素显示效果:

扩展资料

1、display:inline比较经典的用法是用在

<ul>

下的

<li>

内联

block一般一个块占一行,除非float

inline是自动排为一行,就象段内的文字一样,可成为多行。

2、display:inline

的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span)

而我们一般用的div是块级元素,默认display属性是block,

但将div的display设置为inline的话,则多个div可以象span一样显示在一行了。

3、display:inline

对应不显示为

display:none,display:block

对应不显示为

hidden。

参考资料来源:百度百科:display:inline