CSS изображение вызывает проблемы в меню

Question

CSS изображение вызывает проблемы в меню

0

У меня есть код меню JSBIN.
Я пытаюсь поставить изображение в середине меню, например, код JSBIN.
Но есть две проблемы:

Расстояние от левого меню ("О нас") до края и расстояние от правого меню ("Swap Guides") различны.
Изображение понижает меню вниз.

Я попытался использовать настройку line-height и попытался сыграть с позицией изображения, но это не помогает.

Спасибо!

rolory 15 фев. 2014, в 14:00

Источник

Теги:

jquery

html

css

css3

2 ответа

0

Вам нужно добавить .navgroups.menu padding: 0 в ваш .navgroups.menu:

.navgroups .menu {
    display: table;
    margin: 0 auto;
    padding: 0;
}

и измените ваши .navgroups li на это:

.navgroups li {
    float:left;
    list-style-type:none;
}

Обновлен JSBIN

Felix 15 фев. 2014, в 10:08

0

Спасибо за ответ, но, похоже, первая проблема не решена.
rolory 15 фев. 2014, в 13:14

Ещё вопросы

Спасибо за ответ, но, похоже, первая проблема не решена.

Lokesh Suthar · Accepted Answer · 2014-02-15T10-17-00.000Z

1

Лучший ответ

Попробуй это

.navgroups li {
   float:left;
   list-style:none;
}

Вот JSBIN И удалите отображение: inline из этого.

Lokesh Suthar 15 фев. 2014, в 10:17

0

Спасибо за помощь! Я принял это. Но что-то последнее: что ты там делал? Я не хочу открывать еще один и еще один ненужный вопрос, и если я пойму, почему вы это сделали, это может сэкономить для всех нас.
rolory 15 фев. 2014, в 13:04
0

Хорошо, я не совсем уверен, как это объяснить, но, пожалуйста, найдите время и прочитайте о плаваниях. Дело в том, что необычная высота изображения как-то приводила к тому, что высота ul увеличивалась больше, чем его родитель. что заставило меню переместиться вниз.
Lokesh Suthar 15 фев. 2014, в 13:10
0

У меня действительно проблемы с поплавками, все равно спасибо :)
rolory 15 фев. 2014, в 13:15
0

Эй, извините, что беспокою снова, но первые проблемы с краями все еще происходят. Я думаю, что это происходит из-за поплавка, слева. В чем дело?
rolory 15 фев. 2014, в 13:20
0

Дай мне проверить. Какой браузер вы используете ?
Lokesh Suthar 15 фев. 2014, в 13:34
0

Попробуйте использовать 0 отступов в ul.menu
Lokesh Suthar 15 фев. 2014, в 13:41
0

Я использую Opera и Chrome, но в основном Opera. Я думаю, что это работает. Спасибо!!
rolory 15 фев. 2014, в 13:58
0

Извините, но теперь изображение не в центре бара .. Я в отчаянии ..
rolory 15 фев. 2014, в 14:01
0

Если вы хотите сохранить эту структуру, вы должны выбрать, потому что содержимое правой стороны не равно левой стороне. Вы можете попробовать изменить позиции меню. Например, поменяйте местами «поменять направляющие» на «faq»
Lokesh Suthar 15 фев. 2014, в 14:05
0

Так это зависит от количества букв в каждой стороне? Что означает, что если я хочу, чтобы стороны были равны, мне нужно одинаковое количество букв справа и слева?
rolory 15 фев. 2014, в 14:13
0

Полностью нет, но поскольку вы не определяете ширину li, они принимают ширину содержимого. Вы можете попробовать определить ширину li
Lokesh Suthar 15 фев. 2014, в 14:14
0

Это очень чувствительно, потому что если я изменю ширину li, расстояние между ними увеличится, и я хочу, чтобы оно было таким же, то же самое для тега <a> ... и, кстати, спасибо за вашу помощь. Я очень ценю это. Если мне не удастся, вы все равно заслуживаете принятия или голосования. Большое спасибо.
rolory 15 фев. 2014, в 14:31

Показать ещё 10 комментариев