リストを横ナビゲーション

横並びのボックス（liにborderを指定した場合）

marginは通常計算（相殺されません）
paddingはブラウザにより影響
borderも計算に入れる

borderの数値を大きくしただけで、崩れます。
この解釈は、ブラウザごとに違います。（旧ブラウザとモダンブラウザの違い）

ということで、このような崩れをなくすためには「li」に borderを設定するのではなく、「li a」に borderを設定します。
指定された「li幅の上」にborderが設定されるため、幅にborderを加算する必要が無くなります。

リストを横ナビにするときのポイント

「li」ではなく、「li a」にborderを指定する
ul は、レイアウト幅を指定
li は、widthとfloatを指定
li a は、display: block と border-rightを指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>横並びメニュー</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div><!-- /#nav -->
</body>
</html>

《授業例》

@charset "utf-8";

/* reset */
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;   
}

/* body */
body {
  font-size: 16px;
}

/* layout */
#nav {
  width: 750px;
  margin: 50px auto;
}
ul {
  width: 750px;
  overflow: hidden;
  border: 2px solid #3B7F71;
  border-right: none;
}
li {
  float: left;
  width: 150px;
  text-align: center;
}
li a {
  display: block;
  line-height: 50px;
  border-right: 2px solid #3B7F71;
  background: #59BFAC;
  color: #FFF;
  font-weight: bold;
}
li a:hover {
  background: #3B7F71;   
}

@charset "utf-8";

/* リセット */
body, div, ul, li {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* 全体 */
body {
  font-size: 16px;
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

/* ナビゲーション */
#nav {
  margin: 50px 0 0 30px;
}
#nav ul {
  font-size: 18px;
  font-weight: bold;
  border-top: 2px solid #B9D156;
  border-bottom: 2px solid #B9D156;
  border-left: 2px solid #B9D156;
  overflow: hidden;
  text-align: center;
  width: 750px;
}
#nav li {
  float: left;
  width: 150px;
}
#nav li a {
  display: block;
  background-color: #0099FF;
  color: #FFFFFF;
  padding: 8px 0 6px 0;
  border-right: 2px solid #B9D156;
}

/* 擬似クラス */
#nav li a:link, #nav li a:visited {
  background-color: #0099FF;
}
#nav li a:hover, #nav li a:active {
  background-color: #FF8000;
}