Menu 3 élement de taille différente (1gauche 1centré 1droite)

Bonjour à tous.

Voila j'ai un menu constituer de 3 élément textuel de taille différente.
Je voudrais aligner:
Le premier élément tout à gauche
le dernier élément tout à droite
et le dernier au centre

<!-- Menu -->
  <ul class="sf-menu">
    <li>
      Ab
    </li>
    <li>
      Abcd
    </li>
    <li>
      Abcdefmenda
    </li>
  </ul>
<!--/ Menu -->

.sf-menu li {
	float:			left;
	position:		relative;
	margin-left: auto;
  	margin-right: auto;
 	min-width: 100px;
 	text-align: center; 
	border: 1px solid #f0f
}
.sf-menu li:first-child {
	float:			left;
	text-align:		left;
	margin-left:	0px;
	border: 		1px solid #ff0
}
.sf-menu li:last-child {
	float:			right;
	text-align: 	right;	

J'essaye pas mal de chose.
Mais j'y arrive pas quelqu'un aurais une idée?
Merci

Bonjour,

Avec la propriété table-cell c'est simple:

<ul class="box">
  <li> gauche </li>
  <li> centre </li>
  <li> droite </li>
</ul>

* {
	margin: 0px;
	padding: 0px;
}
.box {
	display: table;
	height: 500px;
   border-collapse:separate;
	width: 1000px;border-spacing:1em;
}
li{
	display: table-cell;
	background-color: #CCC;
}
li+li{
	width:33%;
	text-align:center;
}
li+li+li {
	text-align:right;
}

Bonjour,

tu peut aussi simuler ( http://www.w3.org/TR/css3-flexbox/#justify-content ) justify:content:space-between; en jouant avec display et content
demo : http://dabblet.com/gist/4744881

Cdt,

@gc-nomade: intéressant comme technique.