使用“display：inline-block”的最佳做法是什么

Question

当我将它们与列表项一起使用时，“内联块”和“位置”让我感到困惑。 Dreamweaver CS3没有帮助，因为它不显示内联块，而是显示一堆元素。我有兴趣学习最佳实践，以获得各种高度的块元素，使其沿着顶部边缘对齐，同时也在总可用空间内居中。

请您查看这个简化的代码，看看我是否已经正确完成了？ http://www.words4it.com/test_block1.html

这是CSS： http://words4it.com/test_block1.css

谢谢

Answer 1

here is the good article关于定位元素

关于元素大小，边距和填充的

here is the good article

毕竟，关于块，内联块和浮点数的我的简短建议： 浏览器有两种对齐元素的通用模型：

1. 内嵌模型，块水平相互粘贴，在块之间创建具有换行符的块水平线，您可以将其视为文本中的单词。使用此模型可以运行以下属性：

   • 字体大小
   • 行高
   • 文本对齐
   • 垂直对齐
   • 等

2. 阻止模型，阻止彼此垂直制作垂直堆叠的块，您可以将其视为文本中的段落。使用此模型可以运行以下属性：

   • 余量
   • 填充
   • 浮动/清除
   • 位置
   • 等

当您尝试实现所描述的行为时，应使用相应的模型。 几乎没有例外：具有相同浮点值的几个块（例如float：left）可以表现得非常类似于几个内联块，不同之处在于浏览器兼容性，并且选择应该取决于情况。