列表显示得太宽且内联，而不是IE9中的块

Question

我在IE9中的搜索框旁边显示一个列表时遇到了问题，尽管它是一个块元素。

<!--START MENU-->
<ul class="UtilityNav"><li class=" menuItem1 selected first"><a class="selected" href="http://www.ummsfoundation.org/page.aspx?pid=714">HOME</a></li><li class=" menuItem2"><a href="http://www.ummsfoundation.org/eventsNew">CALENDAR</a></li><li class=" menuItem3"><a href="http://www.ummsfoundation.org/giving">GIVE</a></li><li class="menuItem5 last"><a href="http://www.ummsfoundation.org/login">LOGIN</a></li></ul>

<!--Start QuickSearch-->
<table id="PC2781_tableMainAdd" class="QuickSearchFormTable" border="0">
<tbody><tr>
    <td>
        <label for="PC2781_txtQuickSearch" id="PC2781_lblTxtSearch" class="BBFieldCaption QuickSearchFieldCaption">Search:</label>
    </td>
    <td>
        <input name="PC2781$txtQuickSearch" type="text" maxlength="255" id="PC2781_txtQuickSearch" class="QuickSearchTextbox" onkeydown="javascript:if (isEnterPressed(event)) {try{document.getElementById('PC2781_btnQuickSearch').click();return false;} catch(e) {}} else return true;">
    </td>
    <td>
        <label for="PC2781_btnQuickSearch" id="PC2781_lblQuickSearch" style="display: none; visibility: hidden;">Search</label>
        <input type="submit" name="PC2781$btnQuickSearch" value="Search" id="PC2781_btnQuickSearch" class="BBFormSubmitButton QuickSearchButton">
    </td>
</tr>
</tbody></table>


<!--End QuickSearch-->

这是jsfiddle http://jsfiddle.net/jelane20/NZF48/。

我正在尝试将主页与搜索框的左侧对齐，它在Chrome和Firefox中都有效。我试着按照另一个溢出问题中的建议使用初始和自动设置宽度，但仍然不起作用。感谢您对我们的帮助！

Answer 1

您可以修改类ul.UtilityNav并将显示模式从block更改为inline-block。我已经上传了一个新的带有css格式的Fiddle，但是有很多不必要的类。

ul.UtilityNav {
  width:auto;
  display:inline-block;
}

http://jsfiddle.net/Qv7am/3/