Note that there are some explanatory texts on larger screens.

plurals
  1. POIcon placement relative to list items
    primarykey
    data
    text
    <p>When I show a hidden div that is stored inside an <code>&lt;li&gt;</code> tag the icons are pushing down to the bottom of the <code>&lt;li&gt;</code>. How can I prevent this?</p> <p>Here's the HTML:</p> <pre><code>&lt;ul&gt; &lt;li&gt;Utah &lt;ul&gt; &lt;li&gt;Park City &lt;ul&gt; &lt;li&gt;Park Cat 1 &lt;div&gt;&lt;img class="portf_edit" /&gt;&lt;/div&gt; &lt;div&gt;&lt;img class="portf_archive" /&gt;&lt;/div&gt; &lt;div&gt;&lt;img class="portf_delete" /&gt;&lt;/div&gt; &lt;/li&gt; &lt;li&gt;Skiing &lt;div&gt;&lt;img class="portf_edit" /&gt;&lt;/div&gt; &lt;div&gt;&lt;img class="portf_archive" /&gt;&lt;/div&gt; &lt;div&gt;&lt;img class="portf_delete" /&gt;&lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Here's the li css:</p> <pre><code>li { list-style-type:none; vertical-align: top; list-style-image: none; left:0px; text-align:left; clear: both; } .portf_edit{ float:right; position: relative; right:50px; display:block; } .portf_archive{ float:right; position: relative; right:-5px; display:block; } .portf_delete{ float:right; position: relative; right: -60px; display:block; } </code></pre> <p>Here's a screen shot prior to expanding which shows the icons how I want them to line up:</p> <p><a href="http://www.redsandstech.com/css_layout_problem1.jpg" rel="nofollow noreferrer">alt text http://www.redsandstech.com/css_layout_problem1.jpg</a></p> <p>Here's the screen shot prior to expanding which shows where the icons are being pushed to:</p> <p><a href="http://www.redsandstech.com/css_layout_problem2.jpg" rel="nofollow noreferrer">alt text http://www.redsandstech.com/css_layout_problem2.jpg</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload