Jump to content
  • 0

Как изменить длину кнопок меню?


MacPherson
 Share

Question

Как сделать, что бы кнопки были разной длины? Если сделать маркированный список и прописать display:block (для возможности положить фон), то кнопки становятся одинакового размера

e4f6692601941e210f27490ac3a6afb7.jpg

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

Пока не пришлось - мучаюсь с батонами)

Если элементам списка задать свойство float:left например, чтобы горизонтальное меню получилось, то кнопки становятся такими какие надо, то есть длина каждой кнопки будет зависить от текста (а в вертикальном варианте у меня получается, что длина кнопки зависит от самого длинного текста во всём списке.

h_1333923928_3526186_483578a681.png

Вот что получается + код

.sidebar {
width: 300px;
}
.menu {
list-style:none;
font-size:18px;
float: right;
text-align: right;
}
.menu-item {
margin: 10px 15px 0 0;
background:url(../images/button.png) no-repeat top right;
}
.menu-item-link {
line-height: 49px;
display: block;
margin: 0 15px 0 -10px;
padding-left: 10px;
background:url(../images/button.png) no-repeat left -49px;

}

Edited by MacPherson
Link to comment
Share on other sites

  • 0

Без display:block элементы списка ведут себя так же

h_1333949242_3840179_9fefd88721.png

.sidebar {
width: 300px;
}
.menu {
list-style:none;
font-size:18px;
float: right;
text-align: right;
border: 1px solid black;
}
.menu-item {
margin: 10px 15px 0 0;
background:url(../images/button.png) no-repeat top right;
border: 1px solid red;
}
.menu-item-link {
line-height: 49px;
margin: 0 15px 0 -10px;
padding-left: 10px;
}

Link to comment
Share on other sites

  • 0

<style>
ul{width:300px;list-style:none;}
ul>li{float:right;clear:right;border:1px solid #000;}
</style>
<ul>
<li>link1</li>
<li>linklink2</li>
<li>link link 3</li>
<li>link 4</li>
</ul>

а теперь объясню свой минус.

Обратите внимание, что это решение было предложено человеку выше, но проигнорировано.

Он ждал готового кода, когда за него всё сделают и принесут на блюдечке с голубой каёмочкой.

Не надо так делать. Это атрофирует мозг у новичков.

Или вы так устраняете конкурентов?

Link to comment
Share on other sites

  • 0

Ваши слова были не поняты и приняты как ирония ("а если ещё и прописать"). Подумал что ваши слова как-то относится к следующим элементам в моём сайдбаре (я ответил - Пока не пришлось - мучаюсь с батонами). Проще надо быть, wildhind

Мне готовый код не нужен, просто можно было подсказать, что нужно "поиграть" с атрибутом clear

Link to comment
Share on other sites

  • 0

а теперь объясню свой минус.

Обратите внимание, что это решение было предложено человеку выше, но проигнорировано.

Он ждал готового кода, когда за него всё сделают и принесут на блюдечке с голубой каёмочкой.

Не надо так делать. Это атрофирует мозг у новичков.

Или вы так устраняете конкурентов?

спс за объяснение:), вот так бы по чаще, хоть знать за что минус получаю, а то уже 4 без понятия за что...

сюда часто обращаются люди именно за помощью не зная как реализовать то, что они хотят.

а если ещё и прописать float: right…

то тогда придётся прописывать clear

это я видел, но если человек не вкурил, я объяснил на примере, лично до меня лучше практические примеры доходят :)

если он ждал, что ему сделают все за него, то мой пример ему переделывать под свое все равно нужно будет

и еще раз спасиб за объяснение минуса :blush:

Link to comment
Share on other sites

  • 0
если он ждал, что ему сделают все за него, то мой пример ему переделывать под свое все равно нужно будет

Конечно придется, так как придерживаюсь своего стиля + весь макет верстаю, а не только сайдбар отдельно

а теперь объясню свой минус

Если появится возможность ставить +/- на форуме, вам поставлю минус и напишу причину в ЛС :) Почитайте "культуру поведения в разделе" (перед созданием топика как раз читал, чтоб не затоптали)

Edited by MacPherson
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