解决ul元素不能跟div同一行显示的办法

现象如下:

解决ul元素不能跟div同一行显示的办法_第1张图片

html结构如下:

解决ul元素不能跟div同一行显示的办法_第2张图片 

 可以看到div和ul是同级元素。

为什么这里ul换行了呢!

这里要敲黑板了! 因为ul是块级元素!也就是独占一行,跟div一样。

如果需要ul跟div在同一行显示,则要求ul前面相邻的div元素设置浮动属性: float:left.

 解决ul元素不能跟div同一行显示的办法_第3张图片

 解决ul元素不能跟div同一行显示的办法_第4张图片

 果然给ul的相邻div加了float:left属性,问题解决!

你可能感兴趣的:(CSS)