Динамическая ширина div

html:

<div class="navbar">

<ul>

<li><a href="#">Верхняя навигация navbar</a></li>

<li><a href="#">Элемент №1</a></li>

<li><a href="#">Элемент №2</a></li>

<a href="#">Элемент №3</a>

</ul>

</div>

css:

.navbar{

background: url("navbar.png");

line-height: 33px;

border-top: 2px solid #8eb9d6;

text-align: center;

}

.navbar ul{

border-top: 1px solid #044062;

border-bottom: 1px solid #044062;

margin-top: -2px;

}

.navbar li{

display: inline;

border-right: 1px solid #044062;

padding: 8px 7px 9px 0;

max-width: 250px;

}

.navbar a{

text-shadow: 1px 1px 1px #3e6790;

font-size: 13px;

font-weight: bold;

color: white;

text-decoration: none;

}

//////

Нужно поровну растянуть ширину всех элементов в navbar.

Поигрался с width, max/min-width ничего путного не вышло. Погуглил... советы через js, jquery или кучи дивов. Не хотелось бы так усложнять.