Растягивание тега для заполнения родительского

в горизонтальном списке

Вот мой (абстрагированный )css и HTML:

#primary-menu{
text-align: center;
margin: 20px 0;
}

#primary-menu li{
list-style-type:none;
display: inline;
margin: 8px;
padding: 5px 30px;
}

#primary-menu ul{
padding: 20px 0px;
}

<div id="primary-menu">
<ul id="main-menu">
<li><a href="one">one</a></li>
<li><a href="two">two</a></li>
<li><a href="three">three</a></li>
</ul>   
</div>

Я пытался поместить #primary-menu a{display:block;}и вынуть display: inline;и добавить float:left;в #primary-menu li, но затем список смещается вниз по странице и перемещается за пределы содержащего div, плюс не похоже, что он сохраняет <a>растянулся после того, как я вставил float:left;.

Другой вариант, о котором я знаю, это изменить список так, чтобы он выглядел как <a href="one"><li>one</li></a>, но я бы не хотел этого делать, потому что (помимо того, что это выглядит очень хакерским )этот список создается Drupal, и я бы на самом деле не знаю, как это сделать, не изучая, как работает API, что, похоже, не стоит того для этой единственной проблемы.

Любая помощь будет приветствоваться. Спасибо.