Разве высота и ширина не относятся к размаху?

254

Итого нубский вопрос, но здесь.

CSS

.product__specfield_8_arrow {

    /*background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;*/
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}​​​

HTML

<span class="product__specfield_8_arrow">&nbsp;</span>​

скрипка

По сути, я пытаюсь эмулировать кнопку, сделать интервал (или что-то еще) похожим на кнопку рядом с полем ввода, которое на самом деле не обязательно должно быть одним из-за генератора автозаполнения, который генерирует ошибки onEnter. Думаю, это будет быстрое решение, но, очевидно, нет.

Спасибо.

css html width рукав моря
источник
2
Возможно, вы также захотите проверить stackoverflow.com/questions/2343989/…
Edan Maor
2
Также проверьте стандарт, в частности w3.org/TR/CSS2/visudet.html#the-width-property и w3.org/TR/CSS2/visudet.html#the-height-property , в котором указываются свойства ". Применяется к: все элементы, кроме
незаменяемых

Ответы:

426

Span является встроенным элементом. Он не имеет ширины или высоты.

Вы можете превратить его в элемент уровня блока, тогда он примет ваши директивы измерения.

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}
Башир Аль-Момани
источник
9
Спасибо, исправили это. Я пробовал display: block раньше, но встроенный блок исправил это.
Кайл
21
Это проблема. Если display: blockуказано, span перестает быть встроенным элементом и элементом после него, который появляется на следующей строке. Мне нужен элемент, который встроен, но может иметь желаемую ширину.
Пол
6
Лучшее решение для пользователя: встроенный блок
Anant
37

Попробуйте использовать divвместо spanили с помощью CSS display: block;или display: inline-block;- spanпо умолчанию встроенный элемент, который не может принимать widthи heightсвойства.

Исаак
источник
9
div не является семантической заменой промежутка. Span - это текстовый контейнер, а div - контейнер макета. Применение стиля встроенного блока, как предположил Developer Art, является правильным ответом.
Брайан Скотт
3
Вопрос не дает контекста, указывающего на то, что div по своей сути неуместен с точки зрения семантики.
Исаак
1
На самом деле, читая разметку оператора, на самом деле кажется, что рассматриваемый элемент используется для простого отображения фонового изображения. В этом случае div на самом деле будет более подходящим. -1 удалено из исходного комментария Исаака.
Брайан Скотт
Кроме того, я пытался использовать div перед переключением на span, он всегда отображается под предыдущим div .. Так пошло с Span :)
Kyle
22

Вдохновленный @Hamed, я добавил следующее, и это сработало для меня:

display: inline-block; overflow: hidden;
olleh
источник
11

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

span {display:block;}
Тухид Рахман
источник
14
Я думаю, что display: inline-block;лучше
151291
Поступая таким образом, вы будете меняться для всех промежутков, я бы рекомендовал использовать класс.
Hola Soy Edu Feliz Navidad
9

Согласно комментарию @Paul, если указан display: block, span перестает быть встроенным элементом и элементом после его появления на следующей строке.

Я пришел сюда, чтобы найти решение моей проблемы с высотой пролета, и я получил собственное решение

Добавление overflow:hidden;и поддержание этого в строке решит проблему, только что протестированную в режиме IE8 Quirks

Хамед али хан
источник
Я продолжаю видеть overflow:hidden;в этом контексте. «Контент обрезан без полос прокрутки», - говорит MDN . Кажется нелогичным. Что это здесь делает?
Боб Стейн
8

spanПо умолчанию они отображаются встроенными, что означает, что они не имеют высоты и ширины.

Попробуйте добавить display: blockк вашему диапазону.

Эдан Маор
источник
6

Span начинается как встроенный элемент. Например, вы можете изменить его атрибут отображения на block, и его атрибуты высоты / ширины начнут действовать.


источник
2

span {display:block;} также добавляет разрыв строки.

Чтобы избежать этого, используйте, span {display:inline-block;}а затем вы можете добавить ширину и высоту к встроенному элементу, а также выровнять его внутри блока:

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

больше здесь

markling
источник