Question

我知道这里曾经问过类似的问题，我确实读过它们，但是无论尝试如何，我似乎都无法正确解决。抱歉，大约一周前开始研究HTML / CSS，所以我很新。

因此，我有一个flexbox作为顶部导航栏，并且正在尝试将栏中的按钮均匀地排成一行。但是，无论我如何尝试，它始终将每个按钮堆叠在一起，导致每个按钮1行-> 3行。

下面是代码，感谢您的帮助或建议！

* {
  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 */
.topnav {
  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;
  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;}
/* Change color on hover */

<body>
  <div class="header">
    <h1>Step 1: Header</h1>
    <p>Subheading</p>
  </div>

  <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>
</body>

Answer 1

这是您想要的吗？

基本上，我用类.topnav的{{1}}包裹了所有div

父类具有以下CSS

parent

.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;
}

* {
  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;
}

.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;
}


/* Style the top navigation bar */

.topnav {
  position: relative;
}


/* 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;
}

Answer 2

我想，这就是您要寻找的东西。

devise_for :users, path_names: { sign_in: 'login', sign_out: 'logout' }

包含了<!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>

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

2 个答案: