注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

love3400wind的blog

like

 
 
 

日志

 
 
 
 

默认的div是写一个换一行,怎么定义可以横着排不换行阿?  

2009-08-03 09:35:04|  分类: IT |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

默认的div是写一个换一行,怎么定义可以横着排不换行阿?

如题

还有一个问题:如果定义了text-align : center;  则可以使div居中显示,

但是如果定义div的margin : 0 auto ; 也可以使div居中,

这两个有什么区别呢?

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客用<span>

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客谢谢

那第二个问题呢

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客text-align : center; ie有效

margin : 0 auto ;  ie、ff、opera都有效

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客区别就是:

前者是块内元素居中,后者是块元素本身居中。

你给块设个高度并加个边框就知道区别了。

学习,一定要知其然还要知其所以然啊。

所以我反对楼上的解释方法。

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客style="display:inline"

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客鸡毛在上个帖子中说

说的好,有道理.

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客这个display:inline是干吗的呢,用了一下,显示得很奇怪啊,他可以使div在一排显示??

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客div默认的display属性是block

所以每一个div都是新的一行

现在把display换成inline就不会在起新行了

下面是css2中文手册中的解释

[code]

display版本:CSS1/CSS2  兼容性:IE4+ NS4+ 继承性:无

语法:

display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

参数:

block :  CSS1 块对象的默认值。用该值为对象之后添加新行

none :  CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间

inline :  CSS1 内联对象的默认值。用该值将从对象中删除行

compact :  CSS2 分配对象为块对象或基于内容之上的内联对象

marker :  CSS2 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用

inline-table :  CSS2 将表格显示为无前后换行的内联对象或内联容器

list-item :  CSS1 将块对象指定为列表项目。并可以添加可选项目标志

run-in :  CSS2 分配对象为块对象或基于内容之上的内联对象

table :  CSS2 将对象作为块元素级的表格显示

table-caption :  CSS2 将对象作为表格标题显示

table-cell :  CSS2 将对象作为表格单元格显示

table-column :  CSS2 将对象作为表格列显示

table-column-group :  CSS2 将对象作为表格列组显示

table-header-group :  CSS2 将对象作为表格标题组显示

table-footer-group :  CSS2 将对象作为表格脚注组显示

table-row :  CSS2 将对象作为表格行显示

table-row-group :  CSS2 将对象作为表格行组显示

[/code]

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客用inline显示不对,它把div内的内容显示都变成横排了

如果我要后面整个div跟前面的div排成一排,是不是应该在后面的那个div用display:inline-block阿,可是我试了一下,没变化啊

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客三个div并排排列:

[html]

<style>div

{display:inline;width:123;height:234;text-align:center;padding-top:117;}</style>

<center>

<div style="background:red;">我就在中间</div>

<div style="background:lime;">嘿嘿!!</div>

<div style="background:blue;">那还用说吗?</div>

[/html]

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客那问一下inline-block的用途是什么呢

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客还是上面的例子,去掉display:inline;

div默认的display属性是block

[html]

<style>div

{width:123;height:234;text-align:center;padding-top:117;}</style>

<center>

<div style="background:red;">我就在中间</div>

<div style="background:lime;">嘿嘿!!</div>

<div style="background:blue;">那还用说吗?</div>

[/html]

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客inline-block  : IE5.5  将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内

这个什么作用阿 不懂

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客inline-block 没见过

用inline的办法不是很好 ie里可以对内联对象设置宽度 ff里不行.能通用的办法可能还是用float,虽然比较别扭

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客唉  用float IE和FF也不同  ie 还有bug  郁闷

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客marvellous的代码如果按照w3c标准定义了过渡型XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

就不行了,为什么?

用什么新的办法解决???

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客看看dtd去:

http://www.teein.com/results.aspx?q=dtd%CE%CA%CC%E2&st=PST&SiteID=29&hl=zh-cn&lu=http%3A%2F%2Fwww.blueidea.com%2Fimg%2Fcommon%2Flogo.gif&rt=%BE%AD%B5%E4%C2%DB%CC%B3%CB%D1%CB%F7%BD%E1%B9%FB&ku=http%3A%2F%2Fwww.blueidea.com%2F

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客看了一遍  没找到答案。。。。。

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客没认真看而且您那个也没写完整:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

----------------------------------------------------------------------------------------------------------------------

关于dtd

使用正确的doctype声明

作者: 周靖 译

Tuesday, November 11 2003 10:33 AM

虽然大多数Web文档的顶部都有doctype声明,但很多人都没有注意它。它是在你新建一个文档时,由Web创作软件草率处理的众多细节之一。

虽然doctype被许多人忽视,但在遵循标准的任何Web文档中,它都是一项必需的元素。doctype会影响代码验证,并决定了浏览器最终如何显示你的Web文档。

doctype的作用

doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下,“阅读程序”通常是浏览器或者校验器这样的一个程序,“规则”则是W3C所发布的一个文档类型定义(DTD)中包含的规则。

每个DTD都包括一系列标记、attributes和properties,它们用于标记Web文档的内容;此外还包括一些规则,它们规定了哪些标记能出现在其他哪些标记中。每个Web建议标准(比如HTML 4 Frameset和XHTML 1.0 Transitional)都有自己的DTD。

假如文档中的标记不遵循doctype声明所指定的DTD,这个文档除了不能通过代码校验之外,还有可能无法在浏览器中正确显示。对于标记不一致的问题,浏览器相较于校验器来说更宽容。但是,不正确的doctype声明经常导致网页不正确显示,或者导致它们根本不能显示。

选择正确的doctype

为了获得正确的doctype声明,关键就是让DTD与文档所遵循的标准对应。例如,假定文档遵循的是XHTML 1.0 Strict标准,文档的doctype声明就应该引用相应的DTD。另一方面,如果doctype声明指定的是XHTML DTD,但文档包含的是旧式风格的HTML标记,就是不恰当的;类似地,如果doctype声明指定的是HTML DTD,但文档包含的是XHTML 1.0 Strict标记,同样是不恰当的。

有的时候,也可以根本不使用一个doctype声明。如果没有指定有效的doctype声明,大多数浏览器都会使用一个内建的默认DTD。在这种情况下,浏览器会用内建的DTD来试着显示你所指定的标记。对于一些临时性的、匆忙拼凑的文档(这种文档有许多),你确实可以考虑省略doctype声明,并接受浏览器的默认显示。

完全可以从头编写一个doctype声明,并让它指向自己选择的一个DTD。然而,由于大多数Web文档都需要遵循由W3C发布的某个国际公认的Web标准,所以那些文档通常都要包含以下标准doctype声明之一:

HTML 2:

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.1 plus MathML plus SVG:

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"

"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

除了上面列出的doctype声明,具有特殊要求的一些文档还使用了其他几种声明。

doctype声明通常是文档的第一行,要在<html>标记以及其他文档内容之前。注意,在XHTML文档中,doctype的前面偶尔会出现一条XML处理指令(也称为XML prolog):

<?xml version="1.0" encoding="utf-8"?>

为了确保网页正确显示和顺利通过验证,使用正确的doctype是关键。与内容相反的、不正确的或者形式错误的doctype是大量问题的罪魁祸首。在未来的专栏文章中,我还会具体解释如何诊断及纠正这些问题。

用DW设计网页时,新建一个文件,看代码最前面总要出现一个下面的东东,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

这个是DW自动在网页文件页增加了DTD信息.可以删.

删除后,浏览器会使用的默认DTD.

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这样写也不行啊,display:inline;和这个文档类型有什么冲突吗?

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客碰到显示不了效果,就删掉这个玩艺儿:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

例如css定义彩色滚动条,没它就行,有它就不行。

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客但是这就不能通过XHTML认证阿

是不是说要有<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

一定就没法实现这种inline效果了  如果是这样我就放弃这种效果  我想写完全符合标准的页面:)

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客DTD虽然经常惹祸 但还是写上的好

ie本身有很多和标准不兼容的地方 写上DTD可以纠正不少 也更用以做到兼容性

当然 如果就是要用那些特性的话 就不写

比如下面的例子 IE里 错误的盒模型 margin不生效的auto属性 当去掉DTD的时候就会表现出来

(测试环境 xp sp2 IE6)

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<body>

<div style="width:100px;height:100px;border:1px solid;padding:100px;margin:auto;"></div>

</body>

</html>

[/html]

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客哦 你们在讨论的inline是怎么回事儿?是说div里的内容么?

inline的话不仅div是inline 内容当然也是inline啊

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客我是想加上DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

但是我布局的时候想让div排成一排,于是用了marvellous的 display:inline;方法,可是他好像和我定义的DTD冲突,forfor知道怎么解决吗

默认的div是写一个换一行,怎么定义可以横着排不换行阿? - love3400wind - love3400wind的博客这个好像没有什么错误 inline属性的元素只是个内联框了 对它进行宽高设置完全不起作用

将div变为inline后它就变得像span...div和span除了display一个是block一个是inline外其他任何属性都没有,所以你想把"div"横着排要么用table 要么用float 不然效果会很奇怪的

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<style>div{width:123px;height:234px;text-align:center;padding-top:117px;display:inline;

}</style>

<body>

<center>

<div style="background:red;">我就在中间</div>

<div style="background:lime;">嘿嘿!!</div>

<div style="background:blue;">那还用说吗?</div>

</center>

</body>

</html>

[/html]

  评论这张
 
阅读(4306)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017