Делаю верстку и пункты меню не становятся как надо

@Evgen311293 · Регистрация: 23.03.2011

Студворк — интернет-сервис помощи студентам

Добрый день, всем.
Начал делать верстку и при верстании шапки сайта все хорошо, но пункты меню не становятся горизонтально.
Вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<title>Viacon</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="karkas">
    <div class="header-main">
        <div class="header">
            <ul class="ico">
                <li><a href="#"><img src="images/ico-home.png" alt="Главная"/></li>
                <li><a href="#"><img src="images/ico-contact.png" alt="Контакты"/></li>
                <li><a href="#"><img src="images/ico-map.png" alt="Карта сайта"/></li>
            </ul>
            <div class="header-form">
              <form action="" method="get">
                <input class="search-form" type="text" name="search"/>
                <input type="image" src="images/search.png" />
              </form>
            </div>
            <ul class="menu">
                <li><a href="#">О компании</a></li>
                <li><a href="#">Продукция</a></li>
                <li><a href="#">Проекты</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
*{
    padding:0; margin:0;
}
img{
    border:none;
}
.karkas{
    min-width: 970px; max-width: 1280px; margin: 0 auto;
    
}
.header-main{
    background: url(images/header-main.jpg) left top repeat-x; height: 181px;
 
}
    .header{
        background: url(images/header-bg-road.png) left top no-repeat; height: 181px; position: relative;
    }
    .ico{
        list-style: none; position: absolute; left: 0; top: 0; margin: 35px 0 0 20px;
    }
        .ico li{
          margin: 0 0 20px 0 ;
        }
    .header-form{
        background: #eeeeee; overflow: hidden; padding: 10px 0 10px 30px; width: 290px; border-radius:0 0 0 10px ; position: absolute; right: 0; top: 0;
    }
        .header-form input{
            float: left;
        }
        .search-form{
            background: #ffffff; border: 1 solid #a5acb2; height: 18px; margin: 0 10px 0 0 ; width: 150px;
        }
    .menu{
        list-style: none;
        
    }
        .memu li{
            float: left; font:bold 15px "Trebuchet MS"; color: #ebf0f5; padding: 0 0 0 10px; border-left: 1px solid #ebf0f5;
        }
        .menu li a{
            color: #ebf0f5; text-decoration: none;
        }
        .menu li a:hover{
            text-decoration: underline;

@Lupper · 01.04.2013, 13:07

Сделай так

HTML5
1
2
3
4
5
6
7
8
<div class="menu">
            <ul>
                <li><a href="#">О компании</a></li>
                <li><a href="#">Продукция</a></li>
                <li><a href="#">Проекты</a></li>
                <li><a href="#">Контакты</a></li>
                </ul>
            </div>

CSS
1
2
3
.menu ul li {
            float: left;
         }

И будит работать!

@KaRaNTiN · 01.04.2013, 15:38

CSS
1
2
3
.ico li{
       display: inline-block
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .