Основы Html/Css

Зделал все по примеру все работает.Но возник вопрос по поводу шапки <div id="block1">(урок 2.1 Вставка изображения и списков, 15 минута на уроке, слайд наз-ся - Стили для меню(Шапка)).Кнопки которые получаются имеют разный размер, в зависимости от длины слова в нем(Например: "Руководство" и "Блог"), я хочу чтобы они получились у меня одного размера , например по 100px, пробовал по разному: через width(задавал ширину) ничего не меняется, пробовал через padding, margin - никак, пробовал отдельной надписи в меню(а именно кнопке "Блог") присвоить сой id и через него не вышло.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8"> <!-- указывает кодировку для браузера -->
    <title>Моя первая страница</title>
    <link rel="stylesheet" href="style.css">

  </head>
  <body>
    <div id="block1">
      <div class="main-menu two">
        <menu>
          <li ><a href="#">Главная</a></li>
          <li ><a href="#">Работы</a></li>
          <li ><a href="#">О нас</a></li>
          <li ><a href="#">Блог</a></li>
          <li ><a href="#">Контакты</a></li>
        </menu>
      </div>

                     /*CSS*/
menu{
  list-style: none;
  margin: 0 auto;
}
a{
  text-decoration: none;
  font-family: Georgia;
  transition: .5s linear;
}
.main-menu{
  display: block;
  width: 660px;
  margin: 0 auto 30px;
}
.two menu{
  background: #D4E7EE;
  overflow: hidden;
  padding: 0;
}
.two li{
  float: left;
}
.two a{
  display: block;
  padding: 1em 30px;
  border-right: 1px solid #ADC0CE;
  background: rgba(173, 192, 206, .3);
  color: #29838C;
}
.two a:hover{
  background: #ADC0CE;

урок 2.1 Вставка изображения и списков

Александр

4 years ago

Один ответ