Problemas con menú horizontal: anchura de li y CSS3

[nameless]

Hola a todos,


No se si lo que quiero se puede hacer, me imagino que si y supongo que no será muy complicado pero no he conseguido hacerlo, al menos no de forma "normal".

El caso es que estoy haciendo una pequña web orientada para móviles, más que nada para iPhones y Android más o menos recientes y después de los botones principales que se muestran como bloques quiero poner 4 opciones básicas de contacto que aprovechen los móviles: Llamar al télefono fijo, Llamar al teléfono móvil, Enviar E-mail y Ver Localización.

Al principio hice un lista dentro de un div y use imágenes para los enlaces y no tuve problemas pero ahora he pensado que quizás queda mejor usar unos enlaces con bordes redondeados y degradados hechos en CSS3. El problema que tengo es que quiero darles a los enlaces y a los li una anchura fija que no dependa de lo grande o pequeño que sea el texto del enlace y la única forma que he conseguido de hacer esto y sólo a medias, ampliar la anchura pero no reducirla ha sido aumentando el padding-right del li.

Yo lo que quiero es saber dónde o como poner la anchura al los li y a los li a para que tengan una anchura fija sin depender de los textos del hipervícunlo.

Así está el código ahora:

Código HTML:

<div id="Pie">	
	<ul class="nav">
		<li><a href="tel:+XXX">Llamar fijo</a></li>
		<li><a href="tel:+XXX">Llamar móvil</a></li>
	</ul>
	<ul class="nav2">	
		<li><a href="mailto:[email protected]">Enviar e-mail</a></li>
		<li><a href="http://">Localización</a></li>
	</ul>
</div> 

Y estos los CSS:

Código:

#Footer { 
     float:left;
     width:325px;
     margin:0;
     padding:0; 
     border-top: none;  
     background-color:#333;
     overflow:hidden;
}
.nav{
    float: left;
    margin: 0;
    overflow: hidden;
	padding-top:25px;
    width: 325px;
	height:60px;
	background-color:#999;
}
.nav li:first-child {
	display:inline;
	padding:15px 13px 15px 0;
	width:70px;
	overflow:hidden;
	height:40px;
	margin:12px 10px 12px 15px;
	-webkit-border-radius: 25px 0 0 0;
	-moz-border-radius: 25px 0 0 0;
	border-radius: 25px 0 0 0;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#777'); 
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#777)); 
	background: -moz-linear-gradient(top,  #000,  #777);  
	text-shadow: 0 5px 5px #000;
	border:2px solid #000;
}
.nav li:last-child {
	display:inline;
	padding:15px 0 15px 0;
	width:70px;
	overflow:hidden;
	height:40px;
	margin:12px 0 12px 5px;
	-webkit-border-radius: 0 25px 0 0;
	-moz-border-radius: 0 25px 0 0;
	border-radius: 0 25px 0 0;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#777'); 
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#777)); 
	background: -moz-linear-gradient(top,  #000,  #777);  
	text-shadow: 0 5px 5px #000; 
	border:2px solid #000;
}
.nav li a{
	text-decoration:none;
	padding:5px;
	color:#FFF;
	text-transform:uppercase;
	font-weight:bold;
	text-align:center;
	margin:0;
	width:70px;
}
.nav2{
    float: left;
    margin: 0;
    overflow: hidden;
	padding-top:15px;
    width: 325px;
	height:60px;
	background-color:#999;
}
.nav2 li:first-child {
	display:inline;
	padding:15px 0;
	width:70px;
	overflow:hidden;
	height:40px;
	margin:12px 0 12px 15px;
	-webkit-border-radius: 0 0 0 25px;
	-moz-border-radius: 0 0 0 25px ;
	border-radius: 0 0 0 25px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#777'); 
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#777)); 
	background: -moz-linear-gradient(top,  #000,  #777);  
	text-shadow: 0 5px 5px #000; 
	border:2px solid #000;
}
.nav2 li:last-child {
	display:inline;
	padding:15px 2px 15px 0;
	width:70px;
	overflow:hidden;
	height:40px;
	margin:12px 0 12px 15px;
	-webkit-border-radius: 0 0 25px 0;
	-moz-border-radius: 0 0 25px 0;
	border-radius: 0 0 25px 0;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#777'); 
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#777)); 
	background: -moz-linear-gradient(top,  #000,  #777);  
	text-shadow: 0 5px 5px #000;
	border:2px solid #000; 
}
.nav2 li a{
	text-decoration:none;
	padding:5px;
	color:#FFF;
	text-transform:uppercase;
	font-weight:bold;
	text-align:center;
	margin:0;
	width:70px;
}

Si me podéis decir qe creéis que hago mal os lo agradecería mucho.