Блог

Я создаю свой первый веб-сайт после прочтения CSS и HTML.Я смог перенести заголовок на свою индексную страницу с навигационной панелью и брендом. Для бренда я выровнял его по центру, используя свойство margin-top, и установил навигационные ссылки, используя свойство float . Однако, когда я проверяю ul элемент с помощью firefox,

1. Я вижу margin-top и margin-bottom 16 px каждого, о котором я понятия не имею, как его добавляют.
2. Является ли выравнивание бренда с помощью margin-top свойства правильным способом выравнивания по центру?
3. Почему ul элемент не занимает всю высоту 44 px set для заголовка.

Я добавляю URL-адрес plunker для получения более подробной информации: http://plnkr.co/edit/RjQtIR?p=preview

Код для получения более подробной информации:

 <header class="main-header">
        <nav class="top-bar clearfix">
            <span class="brand">Money Plant Services</span>
            <section class="nav-menu">
                <ul class="nav-items">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Downloads</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </section>
        </nav>
    </header>

CSS:

.main-header{
  width: 100%;
  height:44px;
  background-color: #3A3A3A;
}

.brand{
  float: left;
  margin-top: 12px;
  padding-left: 10px;
  color: #FFFFFF;
}

.nav-menu{
  float:right;
}

.nav-items{
  list-style: none;
}

.nav-items li{
  float: left;
  margin-right: 5px;
  padding: 5px;
  background-color: #FFFFFF;
}

li > a{
  color: black;
  text-decoration: none;
}
  

Я надеюсь, что это поможет вам. Просто замените приведенный ниже код на ваш, он будет работать…

CSS:

 .nav-items {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top:8px;
  display: inline-block;
}
  

Ul имеет поле по умолчанию, поэтому вы можете удалить его, добавив….

  <ul style="margin:0px">
  

Кроме того, поля отличаются от браузера к браузеру, поэтому стоит ознакомиться с информацией об этом в Интернете или протестировать ее самостоятельно с помощью inspect element.

При горизонтальном выравнивании есть много способов сделать это…

вы можете использовать метод выравнивания текста или метод автоматического поля или пользовательский способ заполнения.(есть и другие способы).

Пример:

 <div style="width:400px;height:20px;text-align:center;">
<div style="width:20px;height:20px;">
</div></div>
  

Пример:

 <div style="width:400px;height:20px;">
<div style="width:20px;height:20px;margin-left:auto;margin-right:auto;">
</div></div>
  

Выравнивание по вертикали немного сложнее, но может быть выполнено с помощью ячеек таблицы (есть и другие методы).

Правильный способ выравнивания — это либо использование свойства выравнивания текста, либо использование автоматических полей, как указано службой проверки w3c.