创建一个水平菜单 - 使用浮动来创建水平菜单的超链接列表。 - 在线编辑器

          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    ul {
      float: left;
      width: 100%;
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

    a {
      float: left;
      width: 6em;
      text-decoration: none;
      color: white;
      background-color: purple;
      padding: 0.2em 0.6em;
      border-right: 1px solid white;
    }

    a:hover {
      background-color: #ff3300;
    }

    li {
      display: inline;
    }
  </style>
</head>

<body>
  <ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
  </ul>

  <p>
    上面的示例中,我们让ul元素和元素浮动。 li元素将显示为内联元素(没有换行符的元素之前或之后)。这迫使列表为一行。 ul元素的宽度的100%,每一个超链接列表的宽度6 em(当前字体大小的6倍)。 我们添加一些颜色和边界使其更高档。
  </p>

</body>
</html>
        