Note that there are some explanatory texts on larger screens.

plurals
  1. POi want the the text to be shown besides the icon image and not below it
    primarykey
    data
    text
    <p>Here, in the following code, the text in <code>&lt;p&gt;&lt;/p&gt;</code> gets displayed below the icon in the div. I want this <code>&lt;p&gt;</code> to appear within the div beside the icon image. Also, I want the <code>&lt;div&gt;</code> tags to be positioned at the bottom of the page. </p> <p>Here is my code.</p> <pre><code>&lt;body&gt; &lt;input type="date"&gt;Date&lt;/input&gt; &lt;input type="number"&gt;Fs&lt;/input&gt; &lt;input type="number"&gt;PtP&lt;/input&gt; &lt;br/&gt;&lt;br/&gt; &lt;div id="add"&gt;&lt;img src="iconic\vector\plus_alt.svg"&gt;&lt;p&gt;Add&lt;/p&gt;&lt;/div&gt; &lt;div id="show"&gt;&lt;img src="iconic\vector\eye.svg" title="see"&gt;&lt;p&gt;Show&lt;/p&gt;&lt;/div&gt; &lt;div id="showAll"&gt;&lt;img src="iconic\vector\list.svg"&gt;&lt;p&gt;Show All&lt;/p&gt;&lt;/div&gt; &lt;div id="delete"&gt;&lt;img src="iconic\vector\trash_stroke.svg"&gt;&lt;p&gt;Clear All&lt;/p&gt;&lt;/div&gt; &lt;/body&gt; </code></pre> <p>Here css</p> <pre><code>#add { margin-left:auto; margin-right:auto; margin-bottom:0px } #add { width: 25%; height: 40px; float: left; background-color:#ffcc00;opacity:0.75; } #add p {font-size:15px; position: inline; visibility:hidden } #add:hover p { visibility:visible; } #show { width: 25%; height: 40px; float: left; background-color:#ffcc00;opacity:0.75; } #show p {font-size:15px; position: inline; visibility:hidden } #show:hover p { visibility:visible; } #showAll { width: 25%; height: 40px; float: left; background-color:#ffcc00;opacity:0.75; } #showAll p {font-size:15px; position: inline; visibility:hidden } #showAll:hover p { visibility:visible; } #delete { width: 25%; height: 40px; float: right; background-color:#ffcc00;opacity:0.75; } #delete p {font-size:15px; position: relative; visibility:hidden } #delete:hover p { visibility:visible; } </code></pre>
    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