Как правильно выровнять кнопки с помощью CSS flexbox - PullRequest
Новая
       16

Как правильно выровнять кнопки с помощью CSS flexbox

2 голосов
/ 05 мая 2019

Я знаю, что подобные вопросы задавались здесь и раньше, и я их прочитал, но я просто не могу понять, что это правильно, независимо от того, что я пытаюсь.Извиняюсь, начал изучать 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>

Ответы [ 2 ]

2 голосов
/ 05 мая 2019

Это то, что вы хотите?

В основном я обернул все .topnav с div с классом 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;
}


* {
  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;
}
<div class="header">
  <h1>Step 1: Confucius</h1>
  <p>He who copies the master, honours him</p>
</div>

<div class="parent">
  <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>
1 голос
/ 05 мая 2019

Я думаю, это то, что вы ищете. 

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

Включено <div class="nav-wrap">

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...