css常见问题解决方法

设置方法:

div内的img和span都需要设置vertical-align:middle;

 

解决inline-block的空格：

http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements

a.改变html结构

a1.写到一行

<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul>

a2.改变标签结构

<ul>   <li>   item1</li><li>   item2</li><li>   item3</li><li>   item4</li><li>   item5</li> </ul>

<ul>   <li>item1</li   ><li>item2</li   ><li>item3</li   ><li>item4</li   ><li>item5</li> </ul>

<ul>   <li>item1</li><!--   --><li>item2</li><!--   --><li>item3</li><!--   --><li>item4</li><!--   --><li>item5</li> </ul>

解决div两端对齐的方法:
http://www.w3cplus.com/css/text-align-justify-and-rwd.html
1.使用text-align:justify
2.仅用于inline, inline-block
3.使用:after伪类，添加到元素最后

<ul id="Grid"> <li></li> <li></li> <li></li> <li></li> <li class="break"></li> </ul> 

#Grid{
  text-align: justify;
  font-size: 0.1px; /*hide whitespace between elements*/ } #Grid li{ display: inline-block; width: 23%; ... } #Grid .break{ width: 100%; height: 0; ... } 

#Grid:after{ content: ''; display: inline-block; width: 100%; }