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%;
}