maquetar una lista dentro de una capa en el top

[igualacero]

Estoy intentando colocar una lista en la parte superior de un div, el problema surge porque la lista no se junta en la parte de arriba de la capa y me descuadra el diseño.
pongo el codigo porque sino imposible entenderlo.

Código:

html:

        <div id="friends">
        
       	  <ul id="friends_pro">            
            <li><a href="" ><img  src="imagenes/mens_pro.png" align="top"></a></li>  
                <li><a href="" ><img  src="imagenes/photo_pro.png"></a></li>
              <li><a href=""><img  src="imagenes/historial_pro.png"></a></li>
                <li><a href=""><img  src="imagenes/amigos_pro.png"></a></li>
		  </ul>

Código:

 css:
#friends{
	height:200px;
	width:1280px;
	padding:0px;
	margin:0px;
	list-style-type: none;
}
#friends_pro ul{
	padding: 0px;
	list-style-type: none;
	float:right;
	margin:0px;
	
}
#friends_pro li{
	list-style-type: none;	
	padding: 0px;
	margin:0px;
	
	}

pongo la imagen para verlo mejor
ya he intentado poner el div contendor más pequeño pero no hay forma de subirla hasta arriba o de que se pegue al máximo a la parte de arriba de la capa y entonces el último botón se sale del diseño.