How to get rid of white space between css horizontal list items? [duplicate]
Tags: html,css,html-lists,navigationbar
Problem :
This question already has an answer here:
I've got the following test page and css. When displayed, there is a 4px gap between each list item. How do I get the items to be next to each other?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
</head>
<body>
<div>
<ul class="nav">
<li class="nav"><a class="nav" href="#">One1</a></li>
<li class="nav"><a class="nav" href="#">Two</a></li>
<li class="nav"><a class="nav" href="#">Three</a></li>
<li class="nav"><a class="nav" href="#">Four</a></li>
</ul>
</div>
</body>
</html>
The css:
ul.nav, ul li.nav {
display: inline;
margin: 0px;
padding: 0px;
}
ul.nav {
list-style-type: none;
}
li.nav {
background-color: red;
}
a.nav {
background-color: green;
padding: 10px;
margin: 0px;
}
a:hover.nav {
background-color: gray;
}
Solution :
You need to use display:block and float:left on the lis to remove the space. When they're inline the browser treats them as words, and so leaves space in between.
Also see my similar question.
CSS Howto..
First off, your code has some redundancies and some questionable decisions in it in my humble opinion that you could work around in order to simplify and/or make it more...
change the baseURL of the UIWebView to the url of your mainbundle. NSURL *mainBundleURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]; [self.webView loadHTMLString:htmlString baseURL:mainBundleURL]; ...
LESS is just a CSS preprocessor, it's your selector that could do with the improvement, we can combine that with LESS namespacing to have something like: .A, .D { h4,...
you can add margin-left:-20px to li:before .page-content ul { list-style: none; margin-bottom: 15px; line-height: 34px; color: rgba(204, 204, 204, 1); } .page-content ul { list-style: none; margin-bottom: 15px; line-height: 34px;...
I found the answer here Modern Clean CSS “Sticky Footer” html { position: relative; min-height: 100%; } body { margin: 0 0 100px; /* bottom = footer height */ }...
Here you go. Had to add a wrapping span (necessary so we can set the background to white so the line doesn't hit the text) http://jsfiddle.net/gtspk/9/ <span class="line"> <h2><span>Latest Track</span></h2>...
You could do this using svg's mask. You can change the width and height by changing the #container's width and height. #container { width: 80px; height: 100px; } <div id="container">...
You're overcomplicating things. Small CSS change... .fb_iframe_widget{overflow: hidden;} .fb_ltr{margin-bottom: -20px;} Done! Sidenote - I agree with the warning about legal issues. You shouldn't really do this....
What you can do is use an extra container and position:absolute from the bottom, that way when you add more text the block seems to increase from bottom to top:...
In my opinion I think that instead of applying the slideout animation to the container and toggling the application of a single .slid class which defines the slidein animation, you...
Use the Transform Origin property and you can set the origin point. This will allow you to control where the zoom occurs from/to. transform-origin: top right; etc....
Yes, the leading used in Photoshop behaves differently from the line-height in CSS. You can use some CSS trickery to produce identical results: p { font-size: 20px; line-height: 1; /*...
Check out JQuery Masonry, it will be the simplest way to achieve the layout you want. http://masonry.desandro.com/ I did some reading of Pinterest's javascript a few months ago to figure...
I create a white right triangle with the same height and width of the button, alpha level of 70% and place it as background image background: url(file:///home/juanpa/Public/a/img/Ontario.png) left no-repeat; that's...
It should just be $('ul li.selected:hover ul').show();. If not then please explain in greater detail exactly what you want. Another way is to use: $('ul li.selected').hover( function() { $(this).find("ul").show(); },...
You can do this in CSS by hiding/showing dependant on orientation <style type="text/css"> #warning-message { display: none; } @media only screen and (orientation:portrait){ #wrapper { display:none; } #warning-message { display:block;...
Ok nevermind, I just figured it out -- the hash-symbol # can precede the @{id} reference in the mixin, where the parameter is then passed as a String without...
The first thing I noticed is that you didn't have a minimum boundary. You'll need that in order to enforce the upper AND lower bound. What is the correct math...
AS an old question, this is more like info or reminder about vertical margin or padding in % that takes parent's width as reference . If you use a pseudo...
If you want to style tables in a generic manner, just change the CSS selectors accordingly. The <table> of <p:dataTable> is selectable by the ui-datatable class. .ui-datatable td { background:...
I switched gems from bootstrap-sass to twitter-bootstrap-rails, which allowed me to specify the order of the require directives. After playing around with the correct ordering of the directives I finally...
In your CSS Code I changed the position element to absolute, that allows you to place the element exactly where you want: .subMenuCont { position: absolute; top:0; left: 17.5%; width:...
In div content always starts from left to right, so make your div position:absolute and left:0; then use overflow-x: hidden; this styles only apply left side to be hide .scroller...
Here's a simple example. Notice I've added the id of the div you want to expand into the link to open it using a data attribute: <table> <tr> <td> <div...
Use CSS3's :not() selector (which has an equivalent jQuery selector): img:not(#thisone) { } If you need better browser support, there's always the fact that ID selectors, being the most specific...
Looks like you're doing it almost right. The issue is that your code assumes that NOT calling .classed("selectedNode", true) on a node causes it to NOT have the .selectedNode class...
Luke and Om are both on to something. How your variable is declared could make a big difference. Doing it this way seemed to work for me: @myImgPathVariable: ~'https://developers.google.com/images/developers-logo.png'; div...
You could put a span inside of the h2, but that's not necessary. If you want to style the <a> inside of the <h2>, just do something like: h2 a...
The file menu.svg at http://www.lazeeztandoori.co.uk/image/navicons/ has the file extension svg and content type text/plain; charset=ISO-8859-1.This is the correct file extension for uncompressed SVG, but is the wrong MIME Type...
Use percentages for your sizes, Example width: 50%; max-width: 50% instead of pixeles