Интервал между элементами в одном классе div - PullRequest
Новая
       0

Интервал между элементами в одном классе div

0 голосов
/ 20 марта 2020

Так что я делаю навигационную панель, используя только html и css (Нет JQuery), и я заметил, что css для применения стиля шрифта влияет только на "TA C" слева, а не элементы справа. Кроме того, мне нужно, чтобы каждое из этих слов (они есть в списке) имели пробел между ними, они в одном классе div. мой код ниже изображения enter image description here

<!DOCTYPE html>
<html>
  <head>
    <title>The Accounting Centre</title>
  <link rel="icon" type="image/png" href="TAC.png" sizes="16x16">
    <style>
    body{
      padding: 0;
      margin: 0;
}
    .navbar{
      position: fixed;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      flex-wrap: wrap;
      background-color:#d4d7de;
      width: 100%;
      height:70px;
      z-index: 1;

    }
      .nav{
        display: flex;
        justify-content: right;
        list-style: none;
        margin:15px;
        color:#000;
        text-decoration: none;
        text-transform: uppercase;


 }
        .logo {
          flex: 1 1 auto;
          margin-left: 10%;
          text-transform: uppercase;
          letter-spacing: 1px;
          font-weight: bold;
          font-size:35px;
          margin:15px;
          color:#000;
          text-decoration: none;
          text-transform: uppercase;




}




    </style>
  </head>
    <body>

      <div class="navbar">
        <a href="#" class="logo">TAC</a>
        <ul class="nav">
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About Us</a></li>
          <li><a href="#services">Our Services</a></li>
          <li><a href="#info">Who We Are</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
          <li><a href="#contact">Contact us</a></li>
        </ul>
      </div>

      <div class="banner-area" id="home"l</div>
      <div class="about-area" id="about"</div>
      <div class="services-area" id="services"</div>
      <div class="info-area" id="info"</div>
      <div class="testimonials-area" id="testimonials"</div>
      <div class="contact-area" id="contact"</div>




  </body>

</html>

Ответы [ 2 ]

1 голос
/ 20 марта 2020

Элемент 'a' имеет начальный стиль, который необходимо переопределить.

Кроме того, вам нужно исправить свой HTML. После id = "home" есть ошибочное '1', и вам нужно добавить '>', чтобы закрыть открывающие элементы div.

Попробуйте это: 

  <head>
    <title>The Accounting Centre</title>
  <link rel="icon" type="image/png" href="TAC.png" sizes="16x16">
    <style>
    body{
      padding: 0;
      margin: 0;
}
    .navbar{
      position: fixed;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      flex-wrap: wrap;
      background-color:#d4d7de;
      width: 100%;
      height:70px;
      z-index: 1;

    }
      .nav {
        display: flex;
        justify-content: right;
        list-style: none;
        margin:15px;
      
 }
      .nav a {
        color:#000;
        text-decoration: none;
        text-transform: uppercase;
        padding: 0 1rem;
}
        .logo {
          flex: 1 1 auto;
          margin-left: 10%;
          text-transform: uppercase;
          letter-spacing: 1px;
          font-weight: bold;
          font-size:35px;
          margin:15px;
          color:#000;
          text-decoration: none;
          text-transform: uppercase;
}
    </style>
  </head>
 <!DOCTYPE html>
<html>
<body>

      <div class="navbar">
        <a href="#" class="logo">TAC</a>
        <ul class="nav">
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About Us</a></li>
          <li><a href="#services">Our Services</a></li>
          <li><a href="#info">Who We Are</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
          <li><a href="#contact">Contact us</a></li>
        </ul>
      </div>

      <div class="banner-area" id="home"></div>
      <div class="about-area" id="about"></div>
      <div class="services-area" id="services"></div>
      <div class="info-area" id="info"></div>
      <div class="testimonials-area" id="testimonials"></div>
      <div class="contact-area" id="contact"></div>




  </body>

</html>
0 голосов
/ 20 марта 2020

Используйте систему сетки начальной загрузки и присвойте каждому из элементов внутри div одинакового размера. Тогда вы можете использовать отступы, чтобы иметь место между элементами.

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

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

...