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/

我正在尝试将Home与搜索框的左侧对齐，它适用于Chrome和Firefox。我尝试使用初始和自动设置宽度，如另一个溢出问题所示，但仍无法正常工作。谢谢你的帮助！

Answer 1

您可以修改类ul.UtilityNav并将显示模式从块更改为内联块。我上传了一个带有css格式的新小提琴，但是有很多不必要的类。

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

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

在IE9中，列表显示太宽和内联而不是块

1 个答案: