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

Question

Всего вопросов о нубах, но здесь.

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>​

Fiddle

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

Спасибо.

Answer 1

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

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

span.product__specfield_8_arrow
{
    display: block; /* or inline-block */
}

Answer 2

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

Answer 3

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

display: inline-block; overflow: hidden; 

Answer 4

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

span {display:block;}

Answer 5

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

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

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

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

подробнее здесь