span width property отключен

Question

Привет Я преподаю себе некоторую основу из учебников, и я хочу создать таблицу, подобную элементу отображения, с использованием интервалов.

Итак, я добавил элемент ширины в свой диапазон в шаблоне. (Я знаю, что это не лучшее место, но оно должно иметь приоритет над свойствами стилей и просто для того, чтобы получить представление во время разработки).

<script type="text/template" id="loadedwith-template"> 
    <span style="width:100" class="library"><%= library.name %></span> 
    <input style="width:100" class='input' type="text" /> 
    <button class="delete_lw" >delete</button> 
</script> 

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

«Осмотреть элемент» в Chrome показывает свойство ширины, но отключено (на нем есть строка, например, html strikethrough). Это последнее, что показано в стилях элементов перед секцией вычисленных стилей.

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

a { color: #2929FF; } 
    a:visited { color: #777; } 
    a:hover { 
     color: #8F8FFF; 
     text-decoration: none; 
    } 
    body, button { font: 100%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; } 
    body { 
     background: #FFF; 
     color: #444; 
     padding: 25px 50px; 
    } 
    button, .delete, .swap { 
     border: 0; 
     border-radius: 5px; 
     color: #FFF; 
     cursor: pointer; 
     font-weight: bold; 
     line-height: 1; 
     text-align: center; 
     text-transform: uppercase; 
    } 
    button:hover, .delete:hover, .swap:hover { opacity: 1; } 
    button { 
     background: #2929FF; 
     font-size: 0.75em; 
     padding: 7px 12px; 
     opacity: .75; 
    } 
    h1 { 
     font-size: 1.25em; 
     letter-spacing: -0.5px; 
    } 
    p { 
     color: #777; 
     font: italic 0.75em/1.2 "Georgia", Palatino, "Times New Roman", Times, serif; 
    } 
    span { 
     display: inline-block; 
     margin-right: 10px; 
    } 
    ul { padding-left: 0; } 
    .delete, .swap { 
     font-size: 0.625em; 
     opacity: .25; 
     padding: 3px 10px; 
     position: relative; 
     top: -3px; 
    } 
    .delete { background: #FF29D0; } 
    .swap { background: #FF6529; } 

Answer 1

Вы должны указать единицы измерения

Задание CSS единиц является обязательным требованием для ненулевых значений. Браузеры могут попытаться угадать, что вы имели в виду, но это все равно будет сломанной таблицей стилей в соответствии со стандартом.

I.e. в CSS нет «единицы по умолчанию», просто браузер может попытаться помочь вам, хотя он может просто игнорировать ваш оператор, который не указывает единицы как недопустимые.

Попробуйте style="width:100px"

Answer 2

Вы должны указать единицы, как px:

style="width: 100px"