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

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
источник