Jump to content
  • 0

Выравнивание пунктов меню (без li)


xSPiRiTx
 Share

Question

Нашел интересную менюшку с анимашкой. Расположил все пункты горизонтально. В верстке не используется ul, li.

http://karelin.tk

Не получается отровнять пункты...видим как у пункта Design по бокам много пустого места, а между Typography и Freebies слишком мало и т.д. В зависимости от длинны слова (пункта) верстка плывет.

Помогите решить проблему.

Вот css:

http://karelin.tk/css/default.css

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Такс, давайте 2 скрина, то что сейчас есть, там же укажите то что Вас не устраивает, и второй скрин, там все красиво, направляющими отмечены нужные интервалы/ширины.

Link to comment
Share on other sites

  • 0
Уберите из стилей margin-right: 120px; совсем. И задайте первому спану внутри ссылок position: relative;

отступы убрал.

первый спан это вроде fist-child дописывать? как его правильно дописать?

ща скрины сделаю

Edited by xSPiRiTx
Link to comment
Share on other sites

  • 0

Такс, давайте 2 скрина, то что сейчас есть, там же укажите то что Вас не устраивает, и второй скрин, там все красиво, направляющими отмечены нужные интервалы/ширины.

то, что сейчас есть мы видим на живом примере по адресу http://karelin.tk и в чем там проблема я описал.

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

h_1355931361_2110963_22789865b2.png

Link to comment
Share on other sites

  • 0

во-первых я "не понимат" зачем вы используете абсолютное позиционирование внутри ссылки да еще и несколько одинаковых span. Эффект, которого вы хотите добиться можно получить и с 1.

Во-вторых ваш margin-right 120px отсчитывается от левой границы <a> в виду того, что внутри него ничего по сути нет(абсолютно позиционированные элементы не входят в поток форматирования). в итоге у вас каждый элемент имеет фиксированную ширину в 120px, а так как слова разной длинны то и расстояния разные.

1) уберите этот ужас внутри <a>

2) задайте нормальные margin'ы для каждого <a> и получится то, что вы хотите

Edited by USF
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy