DIVのHTMLアイコンが連続していない

Question

私は奇妙な問題があります。私はいくつかのアイコンをJSPに組み込んで構築しています。アイコンが3つあり、2つのラインが完全に後ろになっています。一番下のものが問題です。あなたはこれを引き起こしているソースコードに基づいて見ることができますか？

<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); 
    } 
}); 

：

これ

は、それが2以下のアイコンが <ul id="hp-dd-menu"

レンダリングされたHTMLである

次のようになります

CSS：

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

私はその後、私は同じ行にそれらを得ることができdivのうちの2個の<aタグを移動することでしたが、それらの間にギャップがある場合：

<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> 

：HTMLレンダリング

私はお互いに同じ行に3つすべてを取得しようとしています。

EDITは：

<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タグのメニューを構築していることが問題だと思います。それをすると、おそらくあなたの問題の原因となっているCSSの規則で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> 

お役に立てれば。

乾杯。