老师好，li标签改成平行是否可以用行内块的方式？
来源：4-3 小慕医生项目开发（3）
慕桂英1122475
2023-02-25 17:52:54
在视频中是用了float：left的方式将nav导航条里面的li标签改为平行显示的。
我尝试改为 inline-block也可以实d现同样的样式。所以想问：
1、这样是否可以呢？？
2、两种方法各自又又什么通常有缺点呢？
尝试代码如下：
header nav ul li {
/* background-color: red; */
display: inline-block;
width: 128px;
height: 60px;
text-align: center;
font-family: Helvetica;
font-size: 16px;
color: #ffffff;
line-height: 60px;
}1回答
-
好帮手慕小李
2023-02-25
同学你好，在不使用浮动的情况下。使用inline-block的方式是可以的，但还需要加入一个vertical-align:middle（使单元格内边距盒模型在该行内居中对齐）的属性（在后续的课程中又讲）
因为课程中li的宽高都已经定死了如128px、60px这样，那么如果说需要并排展示的内容高度不一样，那么仅使用display:block就不ok了。如下
那么对于这种情况将它们按照中线进行对齐，那么则需要加上vertical-align:middle如下：
那么同学如使用display:inline-block的时候也需要加上vertical-align:middle; 这个还是要注意一些的。
另外关于两者的优缺点来说，首先目前的前端开发不像是以前需要考虑很多的兼容问题，如果说这个问题放在几年前那时候还需要考虑IE浏览器的兼容问题时，那么要尽量少使用浮动，或者说使用浮动后出现问题，要针对IE浏览器的不兼容版本写hrak。那么一些情况可以用display:inline-block +vertical-align:middle进行实现，但它在一些浏览器中展示效果又不如浮动的效果好，这也只是历史的问题我个人觉得没必要在去深究，另目前的前端用的更多的是flex布局，但因为当年flex兼容性的问题（它针对移动端兼容性很不错，但是pc端又不是那么优秀）导致我们那时候不得不使用浮动，尤其是写pc端的情况。那个时候因为公司项目需要兼容低版本IE浏览器，所以那时候就会更考虑这两者的优缺点。当今的前端开发因为项目组对于兼容的要求已经上升了很多档次，那么在后续的课程中我们还会学到一个新的布局方式flex布局。也就是目前日常开发中更多被用到的布局方式，尤其是对于“浮动”的处理有新的解决方案。
从同学的提问来说同学可能是有一些基础，但老师这里建议同学，课程中怎么讲可以先按照课程中的写法来（后续同学的想法）几乎在后续课程中都会有知识点讲解的。
别急，祝学习愉快！
0
相似问题