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