html – 使用内联块的问题是什么？

概述内联块非常好用.想象一下,我想把几个div放在中心,而不是摆弄一些margin-auto(当我们想要居中多个div时最终实际上不起作用),所有我必须做的就是给所有div内联块和将它们放在带有text-align：center的容器div中 我的意思是我只是给出了一个例子(我刚刚遇到)关于为什么内联块只是pwn.因此,内联块允许我们为内联元素提供填充和边距,同时我们不必为这些元素声明显式宽度.究竟是 内联块非常好用.想象一下,我想把几个div放在中心,而不是摆弄一些margin-auto(当我们想要居中多个div时最终实际上不起作用),所有我必须做的就是给所有div内联块和将它们放在带有text-align：center的容器div中

我的意思是我只是给出了一个例子(我刚刚遇到)关于为什么内联块只是pwn.因此,内联块允许我们为内联元素提供填充和边距,同时我们不必为这些元素声明显式宽度.究竟是什么捕获在这里？我简直无法相信这是没有成本的.

解决方法 问题是对自然块级元素的ie6 / 7支持.如果在内联元素(如a或span)上使用内联块,它只能在第一次才能正确运行.

幸运的是,这可以通过使用hasLayout来解决(内联块很酷！) – 简而言之,一旦他们已经触发了hasLayout(原始内联块规则可以执行),就会重新显示块显示为内联

另一个问题是内联块自然应该在它们之间有空格,就像句子中的单词一样,实际上它们在大多数浏览器中都有,但你已经猜到它不在IE中了.因此,当你试图将盒子完美地并排放置时,好像它们是浮动的,你必须允许这个空间,但不能在IE中.

有几种方法可以控制这种差距,word-spacing可以说是最合乎逻辑的,但并非所有浏览器都同意这一点,所以我发现最稳定的跨浏览器方式是使用margin-right：-4px;这意味着您可以使用ie6 / 7的第二种解决方法(因为它没有这些间隙)将它的右边距重置为0 – 哦,HTML中的空格有时也会抛出一个曲线球.

这是一个片段,我尝试测试结合IE浏览器,它似乎在浏览器中运行良好,它还测试HTML问题中的空白(我无论如何都无法重建..但是当我最初测试这个代码时有一些几周前)

CSS：

#wrapper {   background: #eee;   wIDth: 200px;   padding: 1px 0;}.foo,.bar {   display:inline-block;   wIDth:98px;   background: #eee;   color:white;   text-align:center;   Font-size: 30px;   Font-family: "trebuchet ms",georgia;   margin-right: -4px; /* this is the easIEst cross-browser fix to zero the whitespace between blocks */}.foo,.bar {/* THE IE workarounds,must come after the above rule *//* note this is a Hack.. the !ie7 part..    you Could put this rule set in a conditional    or use your favourite method  to Feed to LTE IE 7 */   display: inline !ie7;   margin-right: 0 !ie7;}.foo {border: 1px solID #000;}.bar {border: 1px solID #f00;}p {margin: 0;}.wrap {margin: 20px 0;}

HTML

<div ID="wrapper"><div >    <p > Foo </p>    <p > bar </p></div></div>

总结

以上是内存溢出为你收集整理的html – 使用内联块的问题是什么？全部内容，希望文章能够帮你解决html – 使用内联块的问题是什么？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。