Using display: table
(and table-cell
, this is CSS table layout unrelated to the use of HTML table elements and their poor semantics when they aren't for displaying data...) allows the links to stay on one row. I think it also solves your problem of gap on the right but I'm not sure.
- Each li is displayed as
display: table-cell
and a parent asdisplay: table
. Here ul is displayed as row but in such a simple case, it could be displayed asdisplay: table
and nav displayed as it should by default (as a block). - Beware that on Firefox, it's quite strict and there's no margin or padding on a "row", no background-color, etc
- No margin on "cells", but padding is OK. border-collapse and border-spacing also work. The "table" can have a margin, as an HTML table could have.
table-layout: fixed
triggers the other table layout algorithm, very different: width you set are displayed by browsers. Without it, browsers will adapt to the length of content (and they can make wonders with very strange content, but that's not usually what you intend!)- Prefixes on
border-radius
aren't necessary anymore: they were for versions of Firefox and Chrome/Safari that now have quite disappeared: Fx 3.6, Android 2.1, Safari 4- (caniuse)