HTML+CSS解决ul和li的错位、换行问题
2018-02-12 14:49
1211 查看
这篇博客主要是讲如何解决ul和li的一些问题,作为一个CSS大白,作者最近再做一个非常简单的导航栏(一个ul中套4个li,一行)的时候遇到了很多问题。下面将一一讲述。
问题如下:
1.ul中的li如何横向排序?
2.display:inline、inline-block、block有什么区别?
3.为何分配好100%后会换行?
4.为何ul与li会错位?
1.ul中的li如何横向排序?
解决方法:
两种,一种是给li元素的样式里面加个float:left,一种是给li元素加display:inline或display:inline-block,更推荐第二种,因为第二种不会出现更多的错位。
2.display:inline、inline-block、block有什么区别?
答:看这个英文,就知道,inline是在一行中显示,block是块的意思,表示显示可以调高度宽度的块级元素,而inline-block就是将inline和block合起来,就是可以调宽高的块级元素并且显示在一行里。(我找了好久才发现inline不可以调整高宽)
3.换行问题
答:假如有4个li,那每一个都设宽度为25%,会发现会换一行,但是设置的就是100%!那是因为间距的问题,加上一行margin:0 auto就可以了。
4.ul和li的错位问题
最后我们会发现,ul和li会横向错位一点,(我的就是左边ul比li多出来一点,右边li比ul多出来一点)
答:将ul的样式中加入padding:0px;即可解决。
问题如下:
1.ul中的li如何横向排序?
2.display:inline、inline-block、block有什么区别?
3.为何分配好100%后会换行?
4.为何ul与li会错位?
1.ul中的li如何横向排序?
解决方法:
两种,一种是给li元素的样式里面加个float:left,一种是给li元素加display:inline或display:inline-block,更推荐第二种,因为第二种不会出现更多的错位。
2.display:inline、inline-block、block有什么区别?
答:看这个英文,就知道,inline是在一行中显示,block是块的意思,表示显示可以调高度宽度的块级元素,而inline-block就是将inline和block合起来,就是可以调宽高的块级元素并且显示在一行里。(我找了好久才发现inline不可以调整高宽)
3.换行问题
答:假如有4个li,那每一个都设宽度为25%,会发现会换一行,但是设置的就是100%!那是因为间距的问题,加上一行margin:0 auto就可以了。
4.ul和li的错位问题
最后我们会发现,ul和li会横向错位一点,(我的就是左边ul比li多出来一点,右边li比ul多出来一点)
答:将ul的样式中加入padding:0px;即可解决。
相关文章推荐
- css关于div下ul、li 留白错位问题
- 用word-wrap来解决固定大小ul下的每条li中内容太多时不自动换行问题
- 解决ul的li横向排列换行的问题
- css ul li导航菜单居中问题解决方法
- [HTML][CSS]解决CSS中float:right后右对齐换行问题
- 解决HTML表格连续超长英文字符串不能正确换行问题
- table不能换行问题解决,CSS之自动换行总结
- 解决myeclipse开发html.css,jsp乱码问题
- CSS中强制ul li中的文字换行
- 解决li设置浮动ul高度无法被撑开问题
- 解决长串不能自动换行的问题和td中汉字自动换行 && CSS强制不换行
- CSS解决英文自动换行问题
- css div li 使用float但高度不确定造成的错位问题我遇到的(部分360浏览器问题)
- CSS解决部分浏览器块状元素由于边框占用一定宽度导致换行的问题
- 关于ul下<li></li>内插入<span>内容</span>标签自动换行不在同一行问题
- jsp: 解决rs.getString()取值写入HTML不换行问题
- CSS常规布局解决float右浮动换行超出的问题
- css解决页面内容不换行问题
- 解决长串英文字母显示不能自动换行的问题和td中汉字自动换行 && CSS强制不换行
- 解决表格边框不显示的问题-HTML-XHTML-CSS