Горизонтальный список

@Wital · Регистрация: 14.10.2009

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

Добрый день всем! Помогите плз решить проблему.
Стили:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
div.sc_menu {
  display: block;
  position: relative;
  height: 480px;
  width: 900px;
  left: 5px;
  overflow: hidden;
}
ul.sc_menu {
  display: block;
  height: 110px;
  padding: 5px 0 0 0px;
  margin: 0;
  background: url('navigation.png');
  list-style: none;
}
ul.sc_menu li {
  display: block;
  float: left;
  padding: 0px 1px;
}

Разметка:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
            <div class="sc_menu">
                <ul class="sc_menu">
                  <li><a href="#">
                    <img src="images/001.gif" alt=""/>
                  </a></li>
                  <li><a href="#">
                    <img src="images/002.gif" alt=""/>
                  </a></li>
                  <li><a href="#">
                    <img src="images/003.gif" alt=""/>
                  </a></li>
                  <li><a href="#">
                    <img src="images/001.gif" alt=""/>
                  </a></li>
                </ul>
            </div>

в общем, в ограниченном по ширине блоке нужно сделать горизонтальный список, элементами которого являются картинки. При таком написании кода список вертикальный. Help!!!!!

@Good-bad man · 22.11.2010, 16:59

CSS
1
2
3
4
5
ul.sc_menu li {
  display: inline;
  float: left;
  padding: 0px 1px;
}

@Wital · 22.11.2010, 23:32 **[ТС]**

Это не помогло. Если задать ширину ul большую, чем сумма ширин всех фоток, то все норм, отображается. Про inline я знал. Весь нет перерыл. Много советов было. Перепробовал все...

@SoundLess · 23.11.2010, 12:00

Тут и без инлайна все горизонтально выходит. Вот только если ширина всех картинок будет больше ширины блока (здесь 900px), то оно соответственно будет переноситься на следующую строку.

@Wital · 23.11.2010, 14:48 **[ТС]**

так в том то вся и фишка, что мне не надо переносить на другую строку. В последующем там будет добавлена полоса прокрутки.

@SoundLess · 23.11.2010, 15:31

Для этого используются слайдеры на JS. Вот например скроллбар на jQuery - http://jqueryui.com/demos/slider/#side-scroll

@Wital · 23.11.2010, 15:38 **[ТС]**

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

@SoundLess · 23.11.2010, 15:59

В таком случае почему не выставить ширину UL больше ширины всех фоток?

@Hagrael · 23.11.2010, 16:09

Убери ul, вместо него создай таблицу с одной ячейкой, в которую впихни все картинки.

@Wital · 23.11.2010, 22:00 **[ТС]**

с таблицей нет проблем, но нужно именно список. ширина изначально не известна, т.к. пути к фоткам хранятся в бд. их может быть 3 а может и 20....

@SoundLess · 24.11.2010, 06:21

Вот именно поэтому я тебе посоветовал не париться и аоспользоваться слайдером на JS. Там расчет ширины на JS проходит, в зависимости от изображений.

@Nexia · 24.09.2015, 12:33

Всем доброго дня. Делаю горизонтальное меню

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#top ul li{
    margin: 0; /* Обнуляем значение отступов */
    padding: 4px; /* Значение полей */
     
   }
#top ul li{
    display: inline; /* Отображать как строчный элемент */
    margin-right: 5px; /* Отступ слева */
    /*border: 1px solid #000; /* Рамка вокруг текста */
    padding-top: 40px; /* ОТСТУП С ВЕРХУШКИ */
    vertical-align:middle;
    list-style-image: url(../images/line.png);
   }
   
#top ul li:first-of-type {list-style-image: url(../images/line.png);}

Display убираю - все норм, но становится вертикально. Чем его заменить, чтобы и меню горизонтальное было и картинки у каждого пункта были, кроме первого?
Заранее Спасибо!

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 19.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@Wital 17 / 17 / 3 Регистрация: 14.10.2009 Сообщений: 82
	22.11.2010, 23:32 [ТС]
	Это не помогло. Если задать ширину ul большую, чем сумма ширин всех фоток, то все норм, отображается. Про inline я знал. Весь нет перерыл. Много советов было. Перепробовал все... 0

@SoundLess 2 / 2 / 0 Регистрация: 23.11.2010 Сообщений: 13
	23.11.2010, 12:00
	Тут и без инлайна все горизонтально выходит. Вот только если ширина всех картинок будет больше ширины блока (здесь 900px), то оно соответственно будет переноситься на следующую строку. 0

@Wital 17 / 17 / 3 Регистрация: 14.10.2009 Сообщений: 82
	23.11.2010, 14:48 [ТС]
	так в том то вся и фишка, что мне не надо переносить на другую строку. В последующем там будет добавлена полоса прокрутки. 0

@SoundLess 2 / 2 / 0 Регистрация: 23.11.2010 Сообщений: 13
	23.11.2010, 15:31
	Для этого используются слайдеры на JS. Вот например скроллбар на jQuery - http://jqueryui.com/demos/slider/#side-scroll 0

@Wital 17 / 17 / 3 Регистрация: 14.10.2009 Сообщений: 82
	23.11.2010, 15:38 [ТС]
	со слайдером я сам разберусь. вы мне скажите лучще как решить описанную выше проблему. 0

@SoundLess 2 / 2 / 0 Регистрация: 23.11.2010 Сообщений: 13
	23.11.2010, 15:59
	В таком случае почему не выставить ширину UL больше ширины всех фоток? 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	23.11.2010, 16:09
	Убери ul, вместо него создай таблицу с одной ячейкой, в которую впихни все картинки. 0

@Wital 17 / 17 / 3 Регистрация: 14.10.2009 Сообщений: 82
	23.11.2010, 22:00 [ТС]
	с таблицей нет проблем, но нужно именно список. ширина изначально не известна, т.к. пути к фоткам хранятся в бд. их может быть 3 а может и 20.... 0

@SoundLess 2 / 2 / 0 Регистрация: 23.11.2010 Сообщений: 13
	24.11.2010, 06:21
	Вот именно поэтому я тебе посоветовал не париться и аоспользоваться слайдером на JS. Там расчет ширины на JS проходит, в зависимости от изображений. 0