Ширина кнопочки не фиксируется

@Русланыч · Регистрация: 30.12.2014

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

Решил поставить кнопочки, все работает и отступ и все все все, но в чем проблема, ее ширина меняется в зависимости от текста внутри нее, а нужно сделать так чтобы был фиксированный размер. Я пробовал указывать параметр width но это не дало результатов. Вот код:

CSS

.button
{
width: 50px;
text-decoration: none;
margin: 5px;
background-color: gray;
border-radius: 8px;
padding: 4px;
}
 
.button:hover
{
width: 50px;
text-decoration: none;
margin: 5px;
background-color: white;
border-radius: 8px;
padding: 4px;
}

@k-x · 08.01.2015, 22:03

CSS

1	display: inline-block; text-align: center;

и не зачем в hover дублировать значения... достаточно background-color: ~~white~~#fff;

@Русланыч · 08.01.2015, 22:21 **[ТС]**

Сообщение от k-x

display: inline-block; text-align: center;

Как же это поможет фиксации?

@k-x · 08.01.2015, 22:28

Как же это поможет фиксации?

так наверно понятней:

CSS

.button{
    width: 100px; // было 50
    display: inline-block; // ++
    text-align: center; // ++
    text-decoration: none;
    margin: 5px;
    background-color: #666;
    border-radius: 8px;
    padding: 4px;
}
.button:hover{
    background-color: #fff;
}

HTML5

1	<a href="#" class="button">к</a>

@Русланыч · 09.01.2015, 11:27 **[ТС]**

Сообщение от k-x

display: inline-block; // ++
* * text-align: center; // ++

Вот это заинтересовало, попробую

@cellse · 09.01.2015, 11:59

а класс к какому элементу применяется?

@Русланыч · 09.01.2015, 12:44 **[ТС]**

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

а класс к какому элементу применяется?

ясное дело к ссылке

HTML5

1	<a href="#" class="button">ССЫЛКА</a>

@cellse · 09.01.2015, 12:56

HTML5

1	max-width: нужная ширина ;

http://jsfiddle.net/03x10x90/wj5j6mo6/

@Русланыч · 09.01.2015, 13:42 **[ТС]**

[quote="cellse;7083939"]max-width: нужная ширина ;[/quot]
Тут ведь указывается до какой длины может максимально увеличиться элемент, но нужно совсем не это.

@Al_lord · 09.01.2015, 14:35

чтобы усмирить текст где либо я использую параграфы

HTML5

1	<a href="#" class="button"> <p class="textButton">Очень длинный текст ссылки </p> </a>

Так легче выравнивать текст стилизовать и.т.д.

@Русланыч · 09.01.2015, 14:48 **[ТС]**

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

<a href="#" class="button"> <p class="textButton">Очень длинный текст ссылки </p> </a>

Это дедовский способ))) Очень нехорошо если кто либо так сделает) В параграфах никогда не делают ссылки, это ни есть хорошо, это все равно что писать код html в странице с расширением php без использования непосредственно php, тоесть просто глупо

@cellse · 13.01.2015, 19:31

Русланыч, тогда объясните, что вам нужно

Не по теме:

Говорите про дедовские способы и дублируете css в :hover :)

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

CSS

.button{
    width: 100px;
    display: inline-block;
    text-decoration: none;
    margin: 5px;
    background-color: #666;
    border-radius: 8px;
    padding: 4px;
    white-space: nowrap; /* запрещаем перенос строк*/
    overflow: hidden; /* прячем лишний текст*/
    text-overflow: ellipsis; /* отображаем многоточие */
 
}
.button:hover{
    background-color: #fff;
}

@Русланыч 3 / 3 / 2 Регистрация: 30.12.2014 Сообщений: 73
	08.01.2015, 22:21 [ТС]	3
	Сообщение от k-x display: inline-block; text-align: center; Как же это поможет фиксации? 0

@Русланыч 3 / 3 / 2 Регистрация: 30.12.2014 Сообщений: 73
	09.01.2015, 11:27 [ТС]	5
	Сообщение от k-x display: inline-block; // ++ * * text-align: center; // ++ Вот это заинтересовало, попробую 0

@cellse 70 / 68 / 22 Регистрация: 12.08.2013 Сообщений: 297
	09.01.2015, 11:59	6
	а класс к какому элементу применяется? 0

@Русланыч 3 / 3 / 2 Регистрация: 30.12.2014 Сообщений: 73
	09.01.2015, 13:42 [ТС]	9
	[quote="cellse;7083939"]max-width: нужная ширина ;[/quot] Тут ведь указывается до какой длины может максимально увеличиться элемент, но нужно совсем не это. 0

@Русланыч 3 / 3 / 2 Регистрация: 30.12.2014 Сообщений: 73
	09.01.2015, 14:48 [ТС]	11
	Сообщение от Al_lord <a href="#" class="button"> <p class="textButton">Очень длинный текст ссылки </p> </a> Это дедовский способ))) Очень нехорошо если кто либо так сделает) В параграфах никогда не делают ссылки, это ни есть хорошо, это все равно что писать код html в странице с расширением php без использования непосредственно php, тоесть просто глупо 0