hola amigos del foro, estoy empezando a aprender a diseñar web con css y javascript,etc..
y estoy atorado con esto:
cree un <ul> para separar en 3 recuadros la informacion la cual cad cuadro tiene un <a herf="">ver mas</a>, pero este lnk aleja el texto y no tiene una misma linea el párrafo

¿como puedo posicionar correctamente este link sin que afecte el texto alrededor?, se que se puede con "clear" pero no estoy seguro, adjunto mi html y css, esperando me ayuden gracias...




html////////

<div id="topfoto">
<div id="submenu" class="alpha">
<ul>
<li id="cara1"><a href="conocer mas">ver mas</a>Mistika es la solución para la edición, composición, restauración de imagen, y corrección de color profesional.</li>
<li id="cara2"><a href="conocer mas">ver mas</a>Mistika es también multiformato de alta calidad entre 4K, 2K, HD y SD en tiempo real.</li>
<li id="cara3"><a href="conocer mas">ver mas</a>Completo soporte nativo para formatos RED R3D 4K: Incluyendo playback en tiempo real de formatos R3D.</li>
</ul>
</div></div>



css////////


ul{
list-style:none;
margin:0;
padding:0;
}
ul li {
color:#FFF;
display:block;
width:276px;
float:left;
margin:0;
padding:5px;
text-align: justify;
}
ul li a {
color:#333;
margin-top:45px;
padding-right:10px;
float:right;
text-align:left;
}

/////
/test.jpg