Html 如何使用CSS flexbox正确对齐按钮_Html_Css_Flexbox

Html 如何使用CSS flexbox正确对齐按钮

html css

Html 如何使用CSS flexbox正确对齐按钮,html,css,flexbox,Html,Css,Flexbox,我知道以前这里也有人问过类似的问题，我也读过，但不管我怎么做，我似乎都做不好。抱歉，大约一周前我就开始看HTML/CSS了，所以我是个新手因此，我有一个flexbox作为顶部导航栏，并试图在一行中均匀地将整个导航栏上的按钮隔开。但是，无论我尝试什么，它都会将每个按钮堆叠在一起，结果是每个按钮-->3行1行代码如下，感谢您的帮助或建议 *{ 框大小：边框框； } 身体{ 字体系列：Arial；填充：10px；背景#f1f1； } /*标题/博客标题*/ .标题{ 填充：30px；文本对

我知道以前这里也有人问过类似的问题，我也读过，但不管我怎么做，我似乎都做不好。抱歉，大约一周前我就开始看HTML/CSS了，所以我是个新手

因此，我有一个flexbox作为顶部导航栏，并试图在一行中均匀地将整个导航栏上的按钮隔开。但是，无论我尝试什么，它都会将每个按钮堆叠在一起，结果是每个按钮-->3行1行

代码如下，感谢您的帮助或建议

*{
框大小：边框框；
}
身体{
字体系列：Arial；
填充：10px；
背景#f1f1；
}
/*标题/博客标题*/
.标题{
填充：30px；
文本对齐：居中；
背景：白色；
}
.标题h1{
字体大小：35px；
}
/*设置顶部导航栏的样式*/
托普纳夫先生{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
-moz弯曲方向：行；
弹性：2；
弯曲方向：行；
证明内容：之间的空间；
对齐项目：拉伸；
柔性包装：包装；
位置：相对位置；
背景色：#333；
}
/*设置topnav按钮的样式*/
.dropbtn{
背景色：#333；
颜色：白色；
填充：16px；
字体大小：16px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.0）；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#333；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：白色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.dropdown内容a:悬停{背景色：继承；}
.topnav:hover.dropdown内容{display:block；}
.topnav:hover.dropbtn{背景色：继承；}
/*在悬停时更改颜色*/


步骤1：标题
副标题
专业的
业余爱好
教程

这就是你想要的吗

基本上，我将所有

.topnav

用

div

和class

parent

父类具有以下CSS

.parent {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex: 2;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  background-color: #333;
}

*{
框大小：边框框；
}
身体{
字体系列：Arial；
填充：10px；
背景#f1f1；
}
/*标题/博客标题*/
.标题{
填充：30px；
文本对齐：居中；
背景：白色；
}
.标题h1{
字体大小：35px；
}
.家长{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
-moz弯曲方向：行；
弹性：2；
弯曲方向：行；
证明内容：之间的空间；
对齐项目：拉伸；
柔性包装：包装；
背景色：#333；
}
/*设置顶部导航栏的样式*/
托普纳夫先生{
位置：相对位置；
}
/*设置topnav按钮的样式*/
.dropbtn{
背景色：#333；
颜色：白色；
填充：16px；
字体大小：16px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.0）；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#333；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：白色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：继承；
}
.topnav:悬停。下拉内容{
显示：块；
}
.topnav:hover.dropbtn{
背景色：继承；
}


第一步：孔子
复制大师的人尊敬他
专业的
业余爱好
教程

我想，这就是你要找的

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="second.css">
<head>
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 35px;
}

/* Style the top navigation bar */
.nav-wrap{
display: flex;
  flex: 1;
  flex-direction: row;
}
.topnav {
  display: flex;
  flex: 1;
  flex-direction: column;

  position: relative;
  background-color: #333;
}

/* Style the topnav buttons */
.dropbtn {
  background-color: #333;
  color: white;
  padding: 16px;
  font-size: 16px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.0);
}

/*Dropdown content (hidden by default)*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: inherit;}
.topnav:hover .dropdown-content {display: block;}
.topnav:hover .dropbtn {background-color: inherit;}
</style>
</head>
<body>

  <div class="header">
    <h1>Step 1: Confucius</h1>
    <p>He who copies the master, honours him</p>
  </div>
 <div class="nav-wrap">
  <div class="topnav">
    <button class="dropbtn">Professional</button>
    <div class="dropdown-content">
      <a href="first.php" >Professional</a>
    </div>
  </div>

  <div class="topnav">
    <button class="dropbtn">Hobbies</button>
    <div class="dropdown-content">
      <a href="second.php" >Test</a>
    </div>
  </div>

  <div class="topnav">
    <button class="dropbtn">Tutorials</button>
    <div class="dropdown-content">
      <a href="third.php" >Test3</a>
    </div>
  </div>
  </div>
</body>
</html>


* {
框大小：边框框；
}
身体{
字体系列：Arial；
填充：10px；
背景#f1f1；
}
/*标题/博客标题*/
.标题{
填充：30px；
文本对齐：居中；
背景：白色；
}
.标题h1{
字体大小：35px；
}
/*设置顶部导航栏的样式*/
.导航包裹{
显示器：flex；
弹性：1；
弯曲方向：行；
}
托普纳夫先生{
显示器：flex；
弹性：1；
弯曲方向：立柱；
位置：相对位置；
背景色：#333；
}
/*设置topnav按钮的样式*/
.dropbtn{
背景色：#333；
颜色：白色；
填充：16px；
字体大小：16px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.0）；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#333；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：白色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.dropdown内容a:悬停{背景色：继承；}
.topnav:hover.dropdown内容{display:block；}
.topnav:hover.dropbtn{背景色：继承；}
第一步：孔子
复制大师的人尊敬他
专业的
业余爱好
教程

包括

非常感谢您完成了我所寻找的！但是我不太明白为什么我需要添加额外的类并在其中嵌套导航栏本身，也许您可以解释原因，因为我的假设是更改导航栏就足以编辑.dropbtn子项element@Nick，Flexbox需要具有display flex的父级。在您的代码中，父对象就是主体。因此，我添加了一个带有display flexah ok的包装器div，这是有意义的。谢谢你的解释！仅供参考，所有这些

display:

对于前缀/较旧的变体来说，使其成为flex容器是完全没有用的，当您以后在所有其他flex属性上不这样做时，例如

justify content:space-between。请注意，所有Flexbox属性都需要相同的前缀/旧名称/值才能跨bro工作