Элементы списка по горизонтали

@Imperion · Регистрация: 22.12.2015

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

Нужно разместить по горизонтали элементы списка. Однако когда начинаю применять к данным элементам CSS свойства, часть из них применяется некорректно.

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="slider_wrapper">
                <div class="slider">
                    <img src="https://www.cyberforum.ru/images/slide1.png" width="594" height="280" />
                        <div class="featured"></div>
                            <ul class="numbers_slide">
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                            </ul>
                </div>

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
45
46
47
48
49
.slider_wrapper{
    width: 616px;
    height: 302px;
    margin: 21px 0 25px 16px;
    background-color: #f3f3f3;
}
.featured{
    position: absolute;
    height: 38px;
    width: 154px;
    background-image: url("https://www.cyberforum.ru/images/featured.png");
    z-index: 2;
    margin-top: 21px;
}
.slider img{
    position: absolute;
    display: block;
    margin: 10px;
    z-index: 1;
}
.numbers_slide{
    position: relative;
    float: right;
    margin: 267px 22px 0 0;
    z-index: 2;
}
.numbers_slide li{
    display: inline;
    background-color: #EB4900; 
    margin-left: 6px;
    outline: 1px solid #bbb;
}
.numbers_slide li a{
    text-decoration: none;
    font: 12px Arial,sans-serif;
    color: #fff;
    position: relative;
    width: 15px;
    height: 15px;
 
    
    text-align: center;
    display: table-cell;
    outline: 1px solid #cc0000;
}
.numbers_slide li a:hover{
    background-color: #E6E6E6;
    color: #757575;
}

Получаем следующую картину:

Нужно, чтобы эти элементы были размером 15px на 15px, вроде прописал все, но видимо где-то ошибка, помогите, пожалуйста, исправить.

@Fedor92 · 19.03.2016, 11:41

Imperion, для .numbers_slide li измените значение display:inline на display:inline-block...

@Imperion · 19.03.2016, 11:51 **[ТС]**

Спасибо большое!)

Новые блоги и статьи Все статьи Все блоги /
Философия технологии 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(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	19.03.2016, 11:41
	Imperion, для .numbers_slide li измените значение display:inline на display:inline-block... 1

@Imperion -44 / 2 / 3 Регистрация: 22.12.2015 Сообщений: 508
	19.03.2016, 11:51 [ТС]
	Спасибо большое!) 0