Сделать кнопки одинакового размера из списка

@Plug · Регистрация: 16.05.2010

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

Добрый день! Помогите создать кнопки так, чтобы они были одинакового размера. Делаю при помощи <ul>. Чтобы было похоже на кнопку использую изображение background, при наведении он меняется. Но поскольку текст у кнопок разного размера, то в некоторых кнопках background рисуется не весь, а в некоторых даже повторяется. Как сделать чтобы они все были как бы одной ширины? Пробовал применять параметр width, но не помогало...

HTML5
1
2
3
4
5
6
<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">На форум</a></li>
<li><a href="#">Связь</a></li>
<li><a href="#">Об авторах</a></li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#menu {
    margin-left: 350px;
    margin-top: 0px;
    margin-bottom: -3px;
    height: 28px;
}
#ul_content_topmenu li{
    display: inline;
    font-size: 18px;
}
#menu  a{
    background: url("Img/bg_menu.png");
    color:black;
    text-decoration: none;
    padding: 0px 14px 5px 14px;
    font-weight:bold;
}
#menu  a:hover{
    background: url("Img/bg_menu_hover.png");
    text-decoration:underline;
    color:#000;

@Sunman · 12.07.2012, 17:40

задать фиксированную ширину и подогнать под нее изображение

CSS
1
2
3
4
5
#ul_content_topmenu li{
    display: block;
    font-size: 18px;
    width:150px;
}

width - ширина
еще есть height - высота

Добавлено через 2 минуты

Сообщение от Plug

Пробовал применять параметр width, но не помогало...

А куда ты его прописывал? Кстати не заметил, что у тебя элемент инлайновый. width применяется только к блочным, попробуй тот код что я привел.
И если ты инлайн использовал для того, чтобы элементы в одну строку разместить, то вместо него пропиши float:left; эффект тот же, только элементы останутся блочными.
как-то так:

CSS
1
2
3
4
5
#ul_content_topmenu li{
    float:left;
    font-size: 18px;
    width:150px;
}

@mazeltov · 12.07.2012, 17:50

А к чему вообще относится #ul_content_topmenu?

@Plug · 12.07.2012, 18:07 **[ТС]**

Сообщение от Sunman

задать фиксированную ширину и подогнать под нее изображение

CSS
1
2
3
4
5
#ul_content_topmenu li{
    display: block;
    font-size: 18px;
    width:150px;
}

width - ширина
еще есть height - высота

Добавлено через 2 минуты

А куда ты его прописывал? Кстати не заметил, что у тебя элемент инлайновый. width применяется только к блочным, попробуй тот код что я привел.
И если ты инлайн использовал для того, чтобы элементы в одну строку разместить, то вместо него пропиши float:left; эффект тот же, только элементы останутся блочными.
как-то так:

CSS
1
2
3
4
5
#ul_content_topmenu li{
    float:left;
    font-size: 18px;
    width:150px;
}

Благодарю, про float: left; не знал. Все отлично, вот только теперь текст вверху блока находится...

@Sunman · 12.07.2012, 18:18

Хороший кстати вопрос про #ul_content_topmenu. это div ?
Тогда вместо

CSS
1
2
3
4
5
#ul_content_topmenu li{
    float:left;
    font-size: 18px;
    width:150px;
}

Будет

CSS
1
2
3
4
5
#menu li{
    float:left;
    font-size: 18px;
    width:150px;
}

Сообщение от Plug

Благодарю, про float: left; не знал. Все отлично, вот только теперь текст вверху блока находится...

Попробуй исправленный вариант, если что-то не так будет сделай скрин и прикрепи к сообщению

@Plug · 12.07.2012, 18:27 **[ТС]**

Сообщение от Sunman

Хороший кстати вопрос про #ul_content_topmenu. это div ?

Все правильно вы сказали в первый раз. #ul_content_topmenu - это у меня в коде так называется, когда писал сюда решил сократить, однако один пункт почему-то пропустил

@Sunman · 12.07.2012, 18:41

Сообщение от Plug

Все правильно вы сказали в первый раз. #ul_content_topmenu - это у меня в коде так называется, когда писал сюда решил сократить, однако один пункт почему-то пропустил

в любом случае если у тебя такой код:

HTML5
1
2
3
4
5
6
7
8
<div id="ul_content_topmenu">
<ul id="menu">
<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
4
5
#ul_content_topmenu ul li{
    float:left;
    font-size: 18px;
    width:150px;
}

Либо:

CSS
1
2
3
4
5
#menu li{
    float:left;
    font-size: 18px;
    width:150px;
}

И я не понял, работает все нормально уже?

@Plug · 12.07.2012, 18:59 **[ТС]**

Сообщение от Sunman

И я не понял, работает все нормально уже?

Да, все работает. Спасибо

Только текст по вертикали не по центру находится, а так все норм.

@Sunman · 12.07.2012, 19:13

Сообщение от Plug

Да, все работает. Спасибо

Только текст по вертикали не по центру находится, а так все норм.

Для блочных элементов работает свойство padding если ты про текст в элементах li то так попробуй:

CSS
1
2
3
4
5
6
#menu li{
    float:left;
    font-size: 18px;
    width:150px;
    padding:X Y X1 Y1;
}

Где X - отступ сверху, Y- справа
X1 - снизу, Y1 - слева
значение в пикселях можно задать.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	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 Использованы. . .

@mazeltov 15 / 15 / 0 Регистрация: 07.08.2011 Сообщений: 46
	12.07.2012, 17:50
	А к чему вообще относится #ul_content_topmenu? 0