Не распространяется ли высота и ширина на пролет?

Общий вопрос о нобе, но здесь.

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. Думал, что это было бы быстрым решением, но, очевидно, нет.

Спасибо.

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

display: inline-block; overflow: hidden;

Ответ 4

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

span {display:block;}

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

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

больше здесь