如何使用flexbox居中菜单 [英] How to center a menu using flexbox
问题描述
我有一个二线菜单，我希望以flexbox为中心。我是flexbox的新手，有几个问题：
- 当我在DreamWeaver CS6中验证HTML时，它无法识别元素top_row ，left_button和right_button。然而我遵循flexbox的几个例子，显示这是一个适当的格式。我在做这些元素定义有什么问题？
- 如何获得宽度为875px的主菜单行，以保持居中，因为我扩大了窗口，窄？现在它保持左对齐。
- 当窗口变宽和变窄时，如何让left_button（Home）与Main Menu的左边对齐？现在它保持左对齐。
- 当窗口变宽和变窄时，如何让右键（Back）与主菜单的右侧保持一致？现在它与展开或缩小的窗口右侧对齐。
- 如何获得text-decoration：none;属性工作，以便在按钮上没有下划线？
下面是我第一次尝试使用flexbox时的示例代码。
当这个工作的时候，我会把< style> 标记信息移动到一个CSS文件中。
感谢您的阅读。
基础HTML5
-
看起来您正在使用DWCS6？如果是这样，请以HTML5开始您的新网页。标记中的第一个标记是HTML4的倒退。
$ b
<！DOCTYPE html>
-
有一个您可以在HTML5中使用的有限数量的实际标签这些是不是标签，因此验证失败：
< top_row>< right_button><$ c
$ lt; left_button>
-
code> ID = '主'。有一个基本的规则，不应该被打破：
不要使用多于一个元素的ID /每个文档的标签
-
使用class可以在任意多的标签上使用。身份证几乎是无用的，因为它的限制。一旦你开始使用JavaScript，它将会更有价值。
< meta charset ='utf-8'>
在下面的代码片段中，我重构了OP。评论是细节和问题的答案。顺便说一句，SO（StackOverflow）在多个问题上皱眉，所以当发布一个问题时，尽量减少它到一个特定的问题，并确保使一个片段或Plunker来显示你的例子（我已经为你做了）。请记住，遵循指南并具有 Minimal，Complete，and Verifiable example 会吸引更多的人愿意发表一个答案。
SNIPPET
<！DOCTYPE html><！ - <>问题1<> - >< HTML>< HEAD> < meta charset =utf-8> <标题> SO39418788< /标题> <风格> / * [可选] |接下来的3个规则集是你重置的几乎可以应用于任何网页。 * / html {width：100％;身高：100％盒子尺寸：边框;字体：400 16px / 1.428 Arial，Helvetica，sans-serif; } body {width：100％;身高：100％背景：＃EEE8AA; } *，*：before，*：{box-sizing：inherit;保证金：0;填充：0;边框：0无透明; } / * [FLEX CONTAINER] | <>问题2,3和4<> |使用包含所有标签的容器|会给你更多的控制权。有麻烦|有3个标签？ 50个标签？包装一个容器|在他们周围，你会有影响|在他们作为一个群体。这会节省你的从写入额外的重复代码|因为容器的后代|将继承样式。 * / .top {display：flex; / * |所有浏览器的弹性流量都不是100％。 |使用flex-direction * / flex-direction：row更安全。 line-height：25px; text-align：center; / *<>问题2<> * /宽度：100％;最大宽度：875px;证明内容：空间之间;位置：相对; / *<>问题2<> |只要元素是一个块就是这个|风格将水平居中。 * / margin：0 auto; } .center {background：＃BDB76B; flex：2 0 auto;次序：2; font-size：1.4rem; } .left {margin：5px;背景：＃BDB76B;次序：1;位置：绝对;左：0;宽度：150px; } .right {margin：5px;背景：＃BDB76B;顺序：3;位置：绝对;正确：0;宽度：150px; } a，a：link，a：visited {color：rgba（122，2，14，.8）; / *<><>问题5<> |将样式直接应用于< a> * / text-decoration：none; } a：hover，a：active {background：＃000;颜色：＃BDB76B; }< / style>< / head>< body> < header class ='top'> < button class ='left'> < a href =http://www.msn.com/>主页< / a> < /按钮> < h1 class ='center'>主菜单< / h1> < button class ='right'> < a href =＃onclick =history.go（-1）>返回< / a> < /按钮> < / header>< / body>< / html>
I have a second-line menu that I'd like to center using flexbox. I'm new to flexbox and have a few questions:
- When I validate the HTML in DreamWeaver CS6 it doesn't recognize the elements top_row, left_button and right_button. Yet I followed a few examples for flexbox that show this is a proper format. What am I doing wrong with these element definitions?
- How do I get the row "Main Menu", which is 875px wide, to stay centered as I expand the window to make it wider and narrower? Right now it stays left-justified.
- How do I get the left_button (Home) to stay lined up with the left side of Main Menu as the window is widened and narrowed? Right now it stays left-justified.
- How do I get the right_button (Back) to stay lined up with the right side of Main Menu as the window is widened and narrowed? Right now it lines up with the right side of the expanded or narrowed window.
- How do I get the "text-decoration: none;" property to work so that there are no underscores on the button?
Here's the sample code I have at my first attempt to use 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>
When this is working, I'll move the <style> tag information to a CSS file.
Thanks for looking at this.
Fundamental HTML5
It seems like you are using DWCS6? If so, start your new pages as HTML5. The first tag in the markup is a throwback from HTML4. Simply start every page you make with this:
<!DOCTYPE html>The very basic
<meta>tag should be:<meta charset='utf-8'>There is a finite amount of actual tags you can use in HTML5 these are NOT tags so it will fail validation:
<top_row><right_button><left_button>There is more than one tag that has the
id='main'. There is a cardinal rule that should never be broken:DO NOT USE AN ID ON MORE THAN ONE ELEMENT/TAG PER DOCUMENT
Use class instead, it can be used on as many tags as you want. ID is almost useless because of it's restriction. It will be more value to you once you start using JavaScript.
In the following Snippet I have refactored the OP. Commented are details and the answers to the questions. BTW, SO (StackOverflow) frowns on multiple questions, so when posting a question, try to minimize it to a specific problem and make sure to make a Snippet or Plunker to show your example (I did it for you already). Keep in mind that a question that follows the guidelines and has a Minimal, Complete, and Verifiable example will draw more people willing to post an answer.
SNIPPET
<!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居中菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
