Databases
StackOverflow2013
Postsdbo
POAdding a margin to a single list item in a horizontal list
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdding a margin to a single list item in a horizontal list
    text
    copied!<p>Is it possible to add a margin to the top of a <strong>certain item</strong> in a horizontal unordered list?</p> <p>I've made a cloud-themed navigation bar, but I don't want all the clouds to be all in one straight line, so I'm trying to make it so they aren't all in one line.</p> <p>None of these answers have worked for me, it doesn't change the list items at all, so I've added some of the code here:</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div id="clouds"&gt; &lt;ul&gt; &lt;li id="home"&gt;&lt;a href="#"&gt;&lt;img src="buttons/home.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li id="info"&gt;&lt;a href="#"&gt;&lt;img src="buttons/Info.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li id="designs"&gt;&lt;a href="#"&gt;&lt;img src="buttons/Designs.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li id="contact"&gt;&lt;a href="#"&gt;&lt;img src="buttons/Contact.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>body{ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(94,132,19)), color-stop(0.6, rgb(124,180,34)), color-stop(0.6, rgb(252,253,255)), color-stop(1, rgb(117,178,209)) ); background-image: -moz-linear-gradient( center bottom, rgb(94,132,19) 0%, rgb(124,180,34) 60%, rgb(252,253,255) 60%, rgb(117,178,209) 100% ); min-height: 500px; text-align: center; background-position: absolute; } #sun{ height: 72px; width: 72px; float: right; background-image: url('sun.png'); } /*---NAVIGATION---*/ #home img:hover{ background-image: url('buttons/home.png'); } #info img:hover{ background-image: url('buttons/info.png'); } #designs img:hover{ background-image: url('buttons/designs.png'); } #contact img:hover{ background-image: url('buttons/contact.png'); } #clouds ul, li{ display: inline; margin: 40px; } #clouds ul{ display: inline; } /*---NAVIGATION END---*/ #wrap h1{ margin-top: 175px; font-family: code bold; color: white; text-align: center; text-shadow: 2px 2px 5px #000; } #wrap{ font-family: code bold; color: white; text-shadow: 2px 2px 5px #000; width: 500px; text-align: center; margin: 0 auto; } #text{ font-family: kartika; font-size: 22; -moz-column-count: 2; -moz-column-gap: 3em; -moz-column-rule: 1px dashed fff; -webkit-column-count: 2; -webkit-column-gap: 3em; -webkit-column-rule: 1px dashed fff; } </code></pre> <p>I've decided to add the whole of my stylesheet because there might be an error in there somewhere that might be causing the list item margin to not work, although I can't seem to find any problems.</p> <p>Thanks for the answers and comments so far.</p> <p><strong>It seems changing the margin of a single item only works if the list has float: left to it, it is possible to center the list instead of floating it to the left to make it work?</strong></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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