1

Here's my code:

jsfiddle.net/q49hb

<ul id="navigation">
  <li><a class="" href="#">Home</a></li>
  <li><a class="" href="#">Blog</a></li>
  <li><a class="" href="#">Services</a></li>
  <li><a class="" href="#">About</a></li>
</ul>

There's a little caret cursor in between each list item when hovering over. I noticed floating to the left will get rid of it, but then I can't center the navigation, which I am also trying to do. Any help?

So to re-cap, I'm looking to:

  1. Space out the list items, leaving no excess space.
  2. Not show a carrot cursor when hovering in between the items.
  3. Centering the unordered list nav on the page.
vals
  • 61,425
  • 11
  • 89
  • 138
user3399996
  • 11
  • 3
  • I dont see anything on hover, except default look for anchor tag ? am i miss something here ? – Hendra Nucleo Mar 10 '14 at 02:01
  • For a more visual example, look at [this](http://jsfiddle.net/Z97yD/) As for a solution, see [this answer](http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-div-elements/19038859#19038859) it's basically because inline elements respect whitespace in the markup – Josh Crozier Mar 10 '14 at 02:02
  • `ul { cursor: pointer }` will help too. – André Muniz Mar 10 '14 at 02:06
  • Is there any way to do this without adding those comments? Also, adding cursor: pointer to ul didn't do anything. – user3399996 Mar 10 '14 at 02:06
  • What you mean about `Not show a carrot cursor when hovering in between the items.`? The cursor: pointer was for this. – André Muniz Mar 10 '14 at 02:14
  • Keep in mind that the cursor change indicates to the user what can and can not be clicked on. If you change the default behaviour here you face the posibility of the user trying to click on something that does nothing. – Jon P Mar 10 '14 at 02:50

3 Answers3

1

None of the answers above are correct or even close. You need users to know what is clickable and what isn't. The caret is in fact misleading and distracting between list items. This is bad UX. You cannot blitz the ul with cursor: pointer; then everything will seem clickable, even bewteen li's.

reset the entire ul's clickable area (even between list items)

ul{
    cursor:default;
}

Now define what is clickable.

ul li{
    cursor:pointer;
}
Ben Racicot
  • 5,332
  • 12
  • 66
  • 130
0

You can do one of two things.

You can set the parent element (#navigation) so cursor: pointer; which will stop the caret from showing in between links:

http://jsfiddle.net/q49hb/1/

#navigation {
    cursor: pointer;
}

Or you can remove the whitespace between the <li>s, which is what's causing the default caret cursor type to show.

http://jsfiddle.net/q49hb/2/

<li><a class="" href="#">Home</a></li><li><a class="" href="#">Blog</a></li><li><a class="" href="#">Services</a></li><li><a class="" href="#">About</a></li>

EDIT: Option 2 is better, (but the code isn't very neat,) because Option 1 gives users the illusion that the space is clickable when it isn't (thanks @JoshC)

Ming
  • 4,468
  • 1
  • 21
  • 21
  • Why would you use `cursor:pointer` indicating that it can be clicked when it can't? Option 2 is definitely better. – Josh Crozier Mar 10 '14 at 02:52
  • @JoshC actually that's a great point, I totally overlooked that. I agree, Option 2 is better. – Ming Mar 10 '14 at 03:12
  • @JoshC unfortunately the OP wants the ability to horizontally centre the items, so floating is out (unless the total width of items is fixed/never changing, in which case yeah it would be viable.) – Ming Mar 10 '14 at 03:14
  • I think that the best option is #navigation {cursor: default;} – vals Mar 10 '14 at 18:53
0

you can set a minus margin-left to force the LI to be together and a set a width for the anchors:

demo 

#navigation li {
    display: inline;
    margin-left: -4px;
}

#navigation a{
    width: 60px;
    display: inline-block;
}
Juan
  • 4,910
  • 3
  • 37
  • 46