Question

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

当我在DreamWeaver CS6中验证HTML时，它不会识别元素top_row，left_button和right_button。然而，我为flexbox提供了一些示例，表明这是一种正确的格式。我对这些元素定义做错了什么？
当我展开窗口以使其更宽更窄时，我如何获得＃8;主菜单＆＃34;（875px宽）保持居中？现在它保持左对齐。
当窗口变宽和缩小时，如何让left_button（Home）与主菜单的左侧保持对齐？现在它保持左对齐。
当窗口变宽和缩小时，如何让right_button（背面）与主菜单的右侧保持对齐？现在，它与扩大或缩小的窗口的右侧对齐。
如何获得＆＃34; text-decoration：none;＆＃34;工作的属性，以便按钮上没有下划线？

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

＆＃13;

<!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>

＆＃13;

当这项工作正常时，我会将<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'。有一个永远不应该被打破的基本规则：

不要在每个文件的元素/标签上使用ID
使用class，它可以在任意数量的标签上使用。由于它的限制，ID几乎无用。一旦开始使用JavaScript，它将对您更有价值。

在下面的代码片段中，我重构了OP。评论的是细节和问题的答案。 BTW，SO（StackOverflow）对多个问题不满意，所以在发布问题时，请尝试将其最小化为特定问题，并确保制作一个Snippet或Plunker来展示您的示例（我已经为您做了）。请注意，guidelines后面有Minimal, Complete, and Verifiable example的问题会吸引更多愿意发布答案的人。

段

<!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集中菜单

1 个答案:

基本HTML5

段