1 

.dropdown-menu {
font-size: 12px;
}

我在 chrome 和 Internet Explorer 中处理的下拉列表看起来像这样，它需要在 Firefox 浏览器上看起来相同。这是我正在处理的代码的代码片段。下面的代码在 Internet Explorer 和 Google Chrome 中运行良好，但在 Firefox 上不起作用，因为 align: right on img 在 Firefox 浏览器中查看时将图像带到下拉菜单中的下一行。我需要帮助，因为我已经尝试了很多，我也想将文本与 Firefox 上的 li 标签中的图像对齐。 这是 Firefox 浏览器上的下拉菜单的图像。

<ul class="dropdown-menu" id="accountmenu">
	                 <li><span id="userli" th:text="'Hi, '+${session.COMMUSER.firstName}+' '+${session.COMMUSER.lastName}"></span></li>
	                  <li><a th:href="@{~/aexportal/ProcessUserEdit.do?userId=}+${session.COMMUSER.userId}">My profile</a></li>
	                  <li><a th:href="@{~/aexportal/ProcessCompanyEdit.do?tpId=}+${session.COMMUSER.aexTpId}">Company profile</a></li>        
	                  <li th:if="${!session.COMMUSER.containsRole('OPERATOR')}"> <a th:href="@{~/aexportal/ProcessTradingPartnerDirectorySearch.do}">Trading Partner Directory</a></li>                 
	                  	<li th:if="${session.COMMUSER.containsRole('BUYER_ADMIN') or session.COMMUSER.containsRole('SELLER_ADMIN')}"><a th:href="@{~/aexportal/ProcessCompanyAdminConsole.do}">Administration</a></li>
	
	                  <li><a th:href="@{http://esupport.aeroxchange.com/secure/Dashboard.jspa}">View and report incidents</a></li>
	                  <li><a th:href="@{~/aexportal/ProcessBeforeRegistration.do}">Create another registration</a></li>
	                  <li><a th:href="@{~aexportal/training/training_centre.jsp}">User Guides</a></li>
	                  <li><span id="productsli" th:text="Products"></span></li>
	                  <li><a th:href="@{~/lbts/DisplayAOGPartSearch.do}">AeroAOG <img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                  <li><a th:href="@{~/polc/DisplayPOBuyerConsole.do}">AeroBuy <img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                 <li><a th:href="@{~/commercial-web/show_console}">AeroBuy Commercial<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>                  			                  			                  			                  			                  			                  			                  			                  			
	                  <li><a th:href="@{~/aexportal/DisplayNewACRedirection.do}">New AeroComponent<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                 <li><a th:href="@{~/ac/DisplayProviderConsole.do}">AeroComponent<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                 <li><a th:href="@{~/consignment/DisplayConsignmentPartSearch.do?appUser=buyer&amp;newSearch=true}">AeroConsignment<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                 <li><a th:href="@{~/repair/DisplayRepairConsole.do?console=buyer}">AeroRepair<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                 <li><a th:href="@{~/aexportal/mktint/mktintPurchaseHome.jsp}">AeroDex<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                 <li><a th:href="@{~/rfi/DisplayRFIConsole.do}">RFx<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	              <li style="text-align: right; margin-right: 5px; margin-top: 1px;"> <button id="logout" class="btn btn-xs btn-primary"> Logout </button></li>                			
	  			</ul>

4

1 回答 1

0

通过完全放弃标记并通过 CSS属性img设置图标图像，所需的结果会更容易实现：background

<ul>
    <li>No Icon Example</li>
    <li>No Icon Example</li>
    <li>No Icon Example</li>
    <li class="icon">Icon Example</li>
    <li class="icon">Icon Example</li>
    <li class="icon">Icon Example</li>
    <li class="icon">Icon Example</li>
    <li class="icon">Icon Example</li>
    <li class="icon">Icon Example</li>
</ul>

ul li {
    height: 30px;
}

ul li.icon {
    background: url("../images/arrow.png") 130px 0 no-repeat;
}
于 2015-10-27T00:58:06.980 回答