css为什么li没有独占一行 css显示不出来的原因

css为什么图片和文字不在一行内显示呢?

你上传的图片看不清楚呀，建议发个高清的截图呢。这里面是内容因为文字是用P标签写的 是块级元素，所以他自己单独占一行。

DIV没有文字垂直居中属性，这个确实是个缺陷问题。需要把图片和单行文字垂直居中对其，可以给图片 的CSS 定义一个vertical-align： middle； 的属性，这样 单行文字就可以垂直居中于图片了。

这个上面加上：align=left 或者 align=right 就行了。前面一个是设置图片左对齐，也就是图片右边可以文字环绕，后面的反之。

img{vertical-align：middle；}如果这个不行的话，可以给vertical-align加具体的值，正负值都试试。

相关问答

Q1: 明明用了display:inline;却还是垂直排列,不能让li显示在同一行?

1、你虽把上级元素转成了内联元素，但其下面不正确的嵌套了块级元素DIV。建议使用浮动或是将下面的块元素也转成内联元素。

2、input {display：block； float：left； } ul {margin：0px； padding：0px； float：left； } 这样就可以让input和ul显示在一行了。

3、你写了 _display：inline；让它变成行内元素了当然不能垂直排列啦，行内元素的特性就是在一行里横向排列的，前面有个下划线，那是ie6浏览器才认识这句代码，其他浏览器不认识，所以还是以块级显示。

4、li默认为块级元素，一个li会独自占据一行，display：inline会把块级元素转换成内联元素，内联元素大小会根据内容多少而变换，且不会自动换行。把内联元素转换成块级元素可以用display：block。

Q2: css,pre包含li标签占多行问题

没看明白你到底是要“换行”，还是不要“换行”，如果是li之间的距离太大的话，你在css里边设置 pre li {display：inline；}试试。

首先，打开html编辑器，一个新建html文件，例如：index.html，填充问题基础代码。其次，在index.html中的style标签中，输入css样式代码：li{padding-top： 49px；}。

利用Dreamweaver新建一个html页面。在body里面输入代码 ul li你好/li li小鱼/li li小小/li /ul。默认的样式是这样的。编辑li标签的css样式。float：left代表的是元素左对齐。

空白是红框这里导致的，解决方法一：将代码往前缩进（缺点：格式代码的时候会恢复原样）。解决方法二：pre{tab-size：2；}（缺点：tab-size太小的话，缩进的效果就会变得不明显）。

pre标签本身就是自动换行的，取决于pre内部的数据。

其实代码规范基本很少会遇到兼容问题。但是把大多数兼容规避掉，是个很漫长的过程。

Q3: css的问题,在li或dd单元格中,如有元素浮动后为什么会跑到下一行去...

因为div是块级元素，会独占一行，所以你的top_bottom_left作为块级元素会占用一行。而当div使用浮动以后，就会脱离原有的位置，所以多个浮动元素可以在一行内。

当一个元素的 float 属性的值不为 none 时（即值为 left 或者 right ），这个元素将脱离“标准流”，变成“浮动流”。“浮动流”的元素会覆盖在“标准流”元素的上方。

首先新建一个html文件，命名为test.html。在test.html文件内，使用p标签创建两行文字，代码如下。在test.html文件内，设置第一个p标签id属性为mp，主要用于下面使用css设置该p元素隐藏。

这是因为left 的浮动也会影响到后面的对象，如果我们给bottom 添加一句clear：both，那么bottom就不会再排在right的右边了，这是因为我们用clear：both清除了前面浮动对象对bottom的影响。

我用你的css代码，在本测试了一下，都是显示正常的。能否告诉我，你这是用什么浏览器测试？建议你把默认的浏览器样式清除掉，就可以解决了。我用chrome和360浏览器，希望对你有帮助。

css为什么li没有独占一行的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css显示不出来的原因、css为什么li没有独占一行的信息别忘了在本站进行查找喔。