html - 使用 CSS 和 HTML 的菜单

Question

我非常挑剔，想创建一个跨页面的菜单，其中包含 span 和 div(好吧，我在 html5 中尝试时有导航和跨度，但这不是必需的，所以我简化了我的问题!) .归结起来基本上就是这样。

我有这段代码:

< html>
  < head>
    < title>Test< /title>
    < style>
      body * { border: 1px solid black; background-color: #999999; }
      span { float:left; display: block; width: 33.33%; margin: 5px; }
      .page { margin: 10px; background-color: #0000ff; }
      .menu { margin: 5px; background-color: #00ffff; }
    < /style>
  < /head>
< body>
  < div class='page'>
    < div class='menu'>
      < span>one< /span>
      < span>two< /span>
      < span>three< /span>
    < /div>
  < /div>
< /body>
< /html>

我想让我的跨度都适合蓝色的 div。完美。

我曾经有一个表格可以完美地显示它，但我试图让我的代码更整洁。有什么建议吗？ :)

非常感谢!

鲍勃

Answer 1

我想你想要我在 jsFiddle 中定义的内容

真正的魔法调味料在父 divb 上的 overflow: hidden 中，如果您要实现精确的 33.3% 宽度，则需要删除填充和边距。当然，如果你想有一些填充和边距，你将不得不调整跨度的宽度。