Как выровнять несколько тегов рядом друг с другом? - PullRequest
Новая
       0

Как выровнять несколько тегов рядом друг с другом?

0 голосов
/ 14 апреля 2020

Я пытаюсь выровнять несколько тегов рядом друг с другом на моей навигационной панели, но всякий раз, когда я выравниваю их по центру, они накладываются друг на друга. Я попытался показать: flex; но это выровняло текст влево 

body {
    overflow-x: hidden;
}

.navbar {
    background-color: #ffffff;
    border-bottom: 2px solid #000000;    
    margin: 0px -2000px;
    padding: 0px 2000px;
}

.cent {
    text-align: center;
  }
  

  .navbar a {
    display: block;
    color: #000000;
    padding: 14px;
    text-decoration: none;  
  }
 
<html>
    <head>
        <title>entertainment</title>
        <link rel="stylesheet" href="entertainment.css">
        <script src="entertainment.js"></script>
    </head>

    <body> 
            
    <div class="navbar">
        <div class="cent">
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        </div>
    </div>
    </body>
    </html>

Ответы [ 4 ]

1 голос
/ 14 апреля 2020

Используйте flex с justify-content: center и избавьтесь от двойного div, который окружает ваши навигационные элементы 

body {
  overflow-x: hidden;
}

.navbar {
  background-color: #ffffff;
  border-bottom: 2px solid #000000;
  margin: auto 0;
  display: flex;
  justify-content: center;
}

.cent {
  text-align: center;
}

.navbar a {
  display: block;
  color: #000000;
  padding: 14px;
  text-decoration: none;
}
<div class="navbar">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
</div>
1 голос
/ 14 апреля 2020

В настоящее время .navbar a установлено на display: block. Это приводит к тому, что элементы располагаются под друг другом.

Чтобы сохранить свойства блоков элементов, но по-прежнему отображать их рядом друг с другом, замените block на inline-block. Вот рабочий фрагмент кода: 

body {
  overflow-x: hidden;
}

.navbar {
  background-color: #ffffff;
  border-bottom: 2px solid #000000;
  margin: 0px -2000px;
  padding: 0px 2000px;
}

.cent {
  text-align: center;
}

.navbar a {
  
  /* This is what changed */
  display: inline-block;
  
  color: #000000;
  padding: 14px;
  text-decoration: none;
}
<html>

<head>
  <title>entertainment</title>
  <link rel="stylesheet" href="entertainment.css">
  <script src="entertainment.js"></script>
</head>

<body>

  <div class="navbar">
    <div class="cent">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
    </div>
  </div>
</body>

</html>
0 голосов
/ 14 апреля 2020

Вы можете использовать display: inline-block, чтобы все встроить.

Здесь есть несколько примеров - https://www.w3schools.com/css/css_display_visibility.asp

body {
    overflow-x: hidden;
}

.navbar {
    background-color: #ffffff;
    border-bottom: 2px solid #000000;    
    margin: 0px -2000px;
    padding: 0px 2000px;
}

.cent {
    text-align: center;
  }
  

  .navbar a {
    display: inline-block;
    color: #000000;
    padding: 14px;
    text-decoration: none;  
  }
 
<html>
    <head>
        <title>entertainment</title>
        <link rel="stylesheet" href="entertainment.css">
        <script src="entertainment.js"></script>
    </head>

    <body> 
            
    <div class="navbar">
        <div class="cent">
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        </div>
    </div>
    </body>
    </html>
0 голосов
/ 14 апреля 2020

Изменить правило отображения для .navbar a на inline-block;

.navbar a {
  display: inline-block; 
}


body {
    overflow-x: hidden;
}

.navbar {
    background-color: #ffffff;
    border-bottom: 2px solid #000000;    
    margin: 0px -2000px;
    padding: 0px 2000px;
}

.cent {
    text-align: center;
  }
  

  .navbar a {
    display: inline-block;
    color: #000000;
    padding: 14px;
    text-decoration: none;  
  }
 
<html>
    <head>
        <title>entertainment</title>
        <link rel="stylesheet" href="entertainment.css">
        <script src="entertainment.js"></script>
    </head>

    <body> 
            
    <div class="navbar">
        <div class="cent">
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        </div>
    </div>
    </body>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...