Как центрировать эту панель навигации ссылками и выпадающими элементами? - PullRequest
Новая
       10

Как центрировать эту панель навигации ссылками и выпадающими элементами?

0 голосов
/ 27 ноября 2018

Я пытаюсь выяснить, как центрировать эту панель навигации, которая содержит ссылки и выпадающие элементы.Я могу сделать так, чтобы ссылки центрировались сами по себе, а выпадающие элементы центрировались сами по себе, но при попытке собрать их все по центру они кажутся центрированными горизонтально, а не вертикально.В настоящее время они выглядят так: по левому краю .Когда я изменяю число с плавающей точкой на ноль (и добавляю flex как предложено), я получаю этот неправильно отцентрированный .

.navbar {
  overflow: hidden;
}

.navbar a {
  float: left;
  padding: 14px 16px;
  background-color: #666666;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  padding: 14px 16px;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  padding: 12px 16px;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="navbar">
  <a href="#">a</a>
  <div class="dropdown">
    <button class="dropbtn">b</button>
    <div class="dropdown-content">
      <a href="#">1</a>
      <a href="#">2</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">c</button>
    <div class="dropdown-content">
      <a href="#">3</a>
      <a href="#">4</a>
    </div>
  </div>
  <a href="#">d</a>
</div>

1 Ответ

0 голосов
/ 27 ноября 2018

Вы можете использовать flex в этом отношении ... 

.navbar {
  overflow: hidden;
  display: flex;
  justify-content:center;
}

.navbar a {
  float: left;
  padding: 14px 16px;
  background-color: #666666;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  padding: 14px 16px;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  padding: 12px 16px;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="navbar">
  <a href="#">a</a>
  <div class="dropdown">
    <button class="dropbtn">b</button>
    <div class="dropdown-content">
      <a href="#">1</a>
      <a href="#">2</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">c</button>
    <div class="dropdown-content">
      <a href="#">3</a>
      <a href="#">4</a>
    </div>
  </div>
  <a href="#">d</a>
</div>
...