如何使用 flexbox 使菜单居中

Question

我有一个二线菜单，我想使用 flexbox 居中。我是 flexbox 的新手，有几个问题：

当我在 DreamWeaver CS6 中验证 HTML 时，它无法识别元素 top_row、left_button 和 right_button。然而我遵循了一些 flexbox 的例子，这些例子表明这是一种正确的格式。我对这些元素定义做错了什么？
如何让宽度为 875 像素的 "Main Menu" 行在扩展 window 使其变宽或变窄时保持居中？现在它保持左对齐。
当 window 加宽和变窄时，如何让 left_button（主页）与主菜单的左侧保持一致？现在它保持左对齐。
当 window 加宽和变窄时，如何让 right_button（返回）与主菜单的右侧保持一致？现在它与扩展或缩小 window.
如何让 "text-decoration: none;" 属性正常工作以便按钮上没有下划线？

这是我第一次尝试使用 flexbox 时的示例代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    body {
      background: #EEE8AA;
    }
    #main {
      margin: 0px;
      padding: 0px;
      display: flex;
      flex-flow: row;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      line-height: 25px;
      text-align: center;
      max-width: 875px;
      align-items: center;
      justify-content: space-between;
    }
    #main > top_row {
      background: #BDB76B;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 875px;
      height: 25px;
    }
    #main > left_button {
      margin: 5px;
      background: #BDB76B;
      order: 1;
      position: absolute;
      left: 0;
      width: 150px;
      text-decoration: none;
    }
    #main > right_button {
      margin: 5px;
      background: #BDB76B;
      order: 3;
      position: absolute;
      right: 0;
      width: 150px;
      text-decoration: none;
    }
  </style>
  <title>Sample Title</title>
</head>

<body>
  <div id="main">
    <top_row>Main Menu</top_row>
  </div>
  <br />
  <div id="main">
    <left_button><a href="http://www.msn.com/">Home</a>
    </left_button>
    <right_button><a href="#" onclick="history.go(-1)">Back</a>
    </right_button>
  </div>
</body>

</html>

当它起作用时，我会将 <style> 标签信息移动到 CSS 文件中。感谢您查看此内容。

Answer 1

基础HTML5

你好像用的是DWCS6？如果是这样，请以 HTML5 开始您的新页面。标记中的第一个标记是 HTML4 的倒退。只需用这个开始你制作的每一页：

<!DOCTYPE html>
最基本的 <meta> 标签应该是：

<meta charset='utf-8'>
有一个 finite amount of actual tags you can use in HTML5 这些是 NOT 标签，因此验证失败：

<top_row> <right_button> <left_button>
有多个标签具有 id='main'。有一条不应该被打破的基本规则：

DO NOT USE AN ID ON MORE THAN ONE ELEMENT/TAG PER DOCUMENT
改用class，它可以用在任意多的标签上。由于它的限制，ID 几乎没有用。一旦您开始使用 JavaScript.

在下面的代码片段中，我重构了 OP。评论是细节和问题的答案。顺便说一句，SO (Whosebug) 对多个问题皱眉头，所以当 post 提出问题时，尽量将其最小化为特定问题，并确保制作一个 Snippet 或 Plunker 来展示你的例子（我已经为你做了).请记住，guidelines and has a Minimal, Complete, and Verifiable example 之后的问题会吸引更多人愿意 post 回答。

片段

<!DOCTYPE html><!-- <>QUESTION 1<> -->
<html>

<head>
  <meta charset="utf-8">
  <title>SO39418788</title>
  <style>
    /*[OPTIONAL] 
    | The next 3 rulesets are a reset that you
    | can apply to almost any webpage.
    */
    html {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      font: 400 16px/1.428 Arial, Helvetica, sans-serif;
    }
    body {
      width: 100%;
      height: 100%;
      background: #EEE8AA;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
      border: 0 none transparent;
    }
    /*[FLEX CONTAINER]
    | <>QUESTIONS 2, 3, and 4<>
    | Using a container that encompasses all tags
    | will give you more control. Having trouble 
    | with 3 tags? 50 tags? Wrap a container 
    | around them and you'll have influence
    | over them as a group. This will save you
    | from writing extra repetitive code 
    | because the descendants of the container
    | will inherit the styles. 
    */
    .top {
      display: flex;
      /*
      | flex-flow is not 100% with all browsers.
      | It's safer to use flex-direction
      */
      flex-direction: row;
      line-height: 25px;
      text-align: center;
      /* <>QUESTION 2<> */
      width: 100%; 
      max-width: 875px;
      justify-content: space-between;
      position: relative;
      /* <>QUESTION 2<> 
      | As long as the element is a block this 
      | style will center it horizontally.
      */
      margin: 0 auto;
    }
    .center {
      background: #BDB76B;
      flex: 2 0 auto;
      order: 2;
      font-size: 1.4rem;
    }
    .left {
      margin: 5px;
      background: #BDB76B;
      order: 1;
      position: absolute;
      left: 0;
      width: 150px;
    }
    .right {
      margin: 5px;
      background: #BDB76B;
      order: 3;
      position: absolute;
      right: 0;
      width: 150px;
    }
    a,
    a:link,
    a:visited {
      color: rgba(122, 2, 14, .8);
      /* <>QUESTION 5<>
      | Apply the style directly on <a> 
      */
      text-decoration: none;
    }
    a:hover,
    a:active {
      background: #000;
      color: #BDB76B;
    }
  </style>

</head>

<body>
  <header class='top'>

    <button class='left'>
      <a href="http://www.msn.com/">Home</a>
    </button>

    <h1 class='center'>Main Menu</h1>

    <button class='right'>
      <a href="#" onclick="history.go(-1)">Back</a>
    </button>

  </header>
</body>

</html>

如何使用 flexbox 使菜单居中

How to center a menu using flexbox

html

menu

center

flexbox

基础HTML5

片段