Чи висота і ширина не стосуються прольоту?

254

Тотальне запитання про noob, але тут.

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>

Скрипка

В основному я намагаюся імітувати кнопку, зробити проміжок (або щось подібне) схожим на кнопку біля поля введення, яке насправді не повинно бути таким через автоматичний генератор заповнення, який генерує помилки на Enter. Думав, що це зараз буде швидким виправленням, але очевидно, що ні.

Дякую.

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 , який визначає властивості "Застосовується для: всі елементи, крім не замінених вбудованих елементів, рядків таблиці та груп рядків ",

— 1010

426

Span - вбудований елемент. Він не має ні ширини, ні висоти.

Ви можете перетворити його на елемент рівня блоку, тоді він прийме ваші директиви щодо розмірів.

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

— Basheer AL-MOMANI
джерело

9

Спасибі, виправили. Я спробував display: block раніше, але вбудований блок виправив його.

— Кайл

21

У цьому проблема. Якщо display: blockвказано, span перестає бути вбудованим елементом і елементом після того, як він з’явиться в наступному рядку. Мені потрібен елемент, який є вбудованим, але може мати бажану ширину.

— Пол,

6

краще рішення - відображення користувача: вбудований блок

— Анант,

37

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

— Ісаак
джерело

9

div не є смисловою заміною прольоту. Проміжок є текстовим контейнером, тоді як div - це контейнер макета. Застосування стилю вкладеного блоку, як запропонувало Developer Art, є правильною відповіддю.

— Брайан Скотт

3

Питання не містить контексту, який би вказував на те, що діва по своїй суті семантично невідповідна.

— Ісаак

1

Насправді, читаючи розмітку оп, це насправді виглядає як розглянутий елемент використовується для простого відображення фонового зображення. У цьому випадку дів насправді буде більш доречним. -1 видалено з оригінального коментаря Ісаака.

— Брайан Скотт

Далі я намагався використовувати div, перш ніж переходити на "span", він завжди відображається під попереднім div. Так пішов із Span :)

— Kyle

22

Надихнувшись від @Hamed, я додав наступне, і це працювало для мене:

display: inline-block; overflow: hidden;

— olleh
джерело

11

Ширина і висота займає лише тоді, коли ми робимо її блоковим елементом.

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

spans за замовчуванням відображаються рядковими, це означає, що вони не мають висоти та ширини.

Спробуйте додати display: blockдо свого періоду.

— Едан Маор
джерело

6

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

2

span {display:block;} також додає перерву рядків.

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

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

більше тут

— маркірування
джерело