DIV中的HTML图标不连续

Question

我有一个奇怪的问题。我有一些图标是根据JSP中的某些内容构建的，没有深入讨论，我有三个图标，两个图标完美对齐。底部的是问题。你能看到基于源代码是什么导致了这个？

这是什么样子

2下面的图标是<ul id="hp-dd-menu"

呈现的HTML：

<div id="iconDiv"> 

    <a id="scroll" href="show.hotpartslist?scroll=true&amp;topcursortorder=DESC&amp;topcursortprop=auditable.createdDate"> 

      <img class="icon" alt="Enable Scrolling" src="../images/scroll_enable.gif"/> 
     </a> 




     <a href='show.hotpartslist?excel=true'> 
      <img class="icon" alt="Download to Microsoft Excel" src="../images/excel.gif"/> 
     </a> 




<ul id="hp-dd-menu" style="display:none;"><li><img alt="Pick Date to Display" class="icon" src="../images/calendar/calendar.gif" /><ul><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=auditable.createdDate&topsortprop=auditable.createdDate&dateToDisplay=ADDED">&#8594;&nbsp;&nbsp;ADDED</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMCRemarkDate&topsortprop=lastMCRemarkDate&dateToDisplay=MC">&nbsp;&nbsp;&nbsp;MC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastSOSRemarkDate&topsortprop=lastSOSRemarkDate&dateToDisplay=SOS">&nbsp;&nbsp;&nbsp;SOS</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMDRemarkDate&topsortprop=lastMDRemarkDate&dateToDisplay=MMC">&nbsp;&nbsp;&nbsp;MMC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastOtherRemarkDate&topsortprop=lastOtherRemarkDate&dateToDisplay=OTHER">&nbsp;&nbsp;&nbsp;OTHER</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=impactDate&topsortprop=impactDate&dateToDisplay=IMPACT">&nbsp;&nbsp;&nbsp;IMPACT</a></li></ul></li></ul> 



<script type="text/javascript"> 
$(function() 
{ 
    try 
    { 

     DynarchMenu.setup('hp-dd-menu', { }); 

    } 
    catch(exception) 
    { 
     alert("Failed to render other menu: " + exception.description); 
    } 
}); 

CSS：

* Used to add non-standard icons to the top right icon list. */ 
#iconDiv 
{ 
float: right; 
width:120px; 
} 

如果我是移动两个<a标记出div的话，我可以让他们在同一行，但在它们之间的差距：

渲染HTML：

<a id="scroll" href="show.hotpartslist?scroll=true&amp;topcursortorder=DESC&amp;topcursortprop=auditable.createdDate"> 

      <img class="icon" alt="Enable Scrolling" src="../images/scroll_enable.gif"/> 
     </a> 



     <a href='show.hotpartslist?excel=true'> 
      <img class="icon" alt="Download to Microsoft Excel" src="../images/excel.gif"/> 
     </a> 




<div id="iconDiv"> 


<ul id="hp-dd-menu" style="display:none;"><li><img alt="Pick Date to Display" class="icon" src="../images/calendar/calendar.gif" /><ul><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=auditable.createdDate&topsortprop=auditable.createdDate&dateToDisplay=ADDED">&#8594;&nbsp;&nbsp;ADDED</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMCRemarkDate&topsortprop=lastMCRemarkDate&dateToDisplay=MC">&nbsp;&nbsp;&nbsp;MC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastSOSRemarkDate&topsortprop=lastSOSRemarkDate&dateToDisplay=SOS">&nbsp;&nbsp;&nbsp;SOS</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMDRemarkDate&topsortprop=lastMDRemarkDate&dateToDisplay=MMC">&nbsp;&nbsp;&nbsp;MMC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastOtherRemarkDate&topsortprop=lastOtherRemarkDate&dateToDisplay=OTHER">&nbsp;&nbsp;&nbsp;OTHER</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=impactDate&topsortprop=impactDate&dateToDisplay=IMPACT">&nbsp;&nbsp;&nbsp;IMPACT</a></li></ul></li></ul> 


    <script type="text/javascript"> 
$(function() 
    { 
    try 
    { 

     DynarchMenu.setup('hp-dd-menu', { }); 

    } 
    catch(exception) 
    { 
     alert("Failed to render other menu: " + exception.description); 
    } 
}); 
</script> 

我只是试图让所有三个在同一行中彼此相邻。

编辑：

<div style="float:right"> 
     <a id="scroll" href="show.hotpartslist?scroll=true&amp;topcursortorder=DESC&amp;topcursortprop=auditable.createdDate"> 

      <img class="icon" alt="Enable Scrolling" src="../images/scroll_enable.gif"/> 
     </a> 

     </div> 




     <a href='show.hotpartslist?excel=true'> 
      <img class="icon" alt="Download to Microsoft Excel" src="../images/excel.gif"/> 
     </a> 



<div style="float:right"> 



<ul id="hp-dd-menu" style="display:none;"><li><img alt="Pick Date to Display" class="icon" src="../images/calendar/calendar.gif" /><ul><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=auditable.createdDate&topsortprop=auditable.createdDate&dateToDisplay=ADDED">&#8594;&nbsp;&nbsp;ADDED</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMCRemarkDate&topsortprop=lastMCRemarkDate&dateToDisplay=MC">&nbsp;&nbsp;&nbsp;MC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastSOSRemarkDate&topsortprop=lastSOSRemarkDate&dateToDisplay=SOS">&nbsp;&nbsp;&nbsp;SOS</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMDRemarkDate&topsortprop=lastMDRemarkDate&dateToDisplay=MMC">&nbsp;&nbsp;&nbsp;MMC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastOtherRemarkDate&topsortprop=lastOtherRemarkDate&dateToDisplay=OTHER">&nbsp;&nbsp;&nbsp;OTHER</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=impactDate&topsortprop=impactDate&dateToDisplay=IMPACT">&nbsp;&nbsp;&nbsp;IMPACT</a></li></ul></li></ul> 



<!-- close the icon div since we specified 'other' --> 
</div> 
</div> 

Answer 1

我尝试下载您所使用的 'DynarchMenu' js文件，没有运气。没有上述文件，我不能确定，但​​我相信你的问题是，DynarchMenu正在从你的ul和li标签建立菜单。当它这样做的时候，它可能会把它们放入div中，并且会导致你的问题。 （divs自动碰到一条新线）

欢迎您将我链接到js文件，如果您愿意，我可以给你一个比这更好的答案。可工作

一两件事，然后再我真的不能测试，将周围放置每个链接的div与“浮动：权利”属性：

<div id="iconDiv" style="width:100px"> 
<div style="float:right"> 
    <a id="scroll" href=""> 
     <img class="icon" alt="Enable Scrolling" src="../images/scroll_enable.gif"/> 
    </a> 
</div> 

<div style="float:right"> 
    <a href='show.hotpartslist?excel=true'> 
     <img class="icon" alt="Download to Microsoft Excel" src="../images/excel.gif"/> 
    </a> 
</div> 

<div style="float:right"> 
    <ul id="hp-dd-menu" style="display:none;"> 
     <li> 
      <img alt="Pick Date to Display" class="icon" src="../images/calendar/calendar.gif" /> 
      <ul> 
       <li> 
        <a href="">1</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

希望这可以帮助。

干杯。