Создать html кнопку/метку с текстом и нулевой начальной шириной

Я пытаюсь создать html-кнопки/метки с текстом и изначально нулевой ширины (после вставки они будут растянуты, чтобы быть видимыми, но я хочу, чтобы этот переход был гладкий; плавный). Я попытался изменить свойства начальной ширины и минимальной ширины, но не повезло.Создать html кнопку/метку с текстом и нулевой начальной шириной

Следующее - это то, что я хочу работать.

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     .zerowidth{width: 0px;min-width: 0px;} 
     .nonzerowidth{font-size: 30px;} 
     button{font-size: 30px;} 
     label{font-size: 30px;} 
     span{font-size: 0px;} 
    </style> 
    </head> 
    <body> 
    <span> 
     <button>This should be visible</button> 
     <button class='zerowidth'>I want this to be invisible</button> 
     <label class='zerowidth'>same here</label> 
     <button>c</button> 
    </span> 
    </body> 
</html>

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

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

Спасибо.

источник

2013-12-26 DomJack

Чтобы сделать элемент button действительно нулевой шириной относительно занимаемой ширины (а не только ширины содержимого, что и задает свойство CSS width), вам необходимо установить горизонтальное заполнение и вертикальные границы на ноль. Кроме того, чтобы предотвратить разделение содержимого браузером на несколько строк, вам необходимо предотвратить разрывы строк. И вам нужно сделать скрытый контент скрытым; для элемента с нулевой шириной содержимого, конечно, любое переполнение содержимого. Таким образом, вы бы добавить следующее:

.zerowidth { 
    padding-left: 0; padding-right: 0; 
    border-left-width: 0; border-right-width: 0; 
    white-space: nowrap; 
    overflow: hidden; 
    }

По какой-то причине, это не является достаточным для создания label элемента нулевой ширины (проверено на IE, Chrome, Firefox). С другой стороны, элемент label предназначен для указания меток полей формы и других элементов, подлежащих анализу, и вы не получаете ничего, кроме проблем, пытаясь использовать его для другого контента. Поэтому рассмотрите возможность использования, например, span.

источник

2013-12-26 08:25:25

Урх, так очевидно. Работает в обаянии. благодаря – DomJack

<button class='zerowidth'>I want this to be invisible</button> 
<label class='zerowidth'>same here</label>

, если вы хотите, чтобы эти две вещи невидимыми, почему бы не добавить style="display:none;" к обоим. И если вы хотите отобразить их, сделайте hover effect и display:block; этому элементу.

источник

2013-12-26 04:39:43

Я хочу, чтобы контент был доступен для просмотра вскоре после вставки, но я не хочу, чтобы его вставка/видимость приводила к тому, что другие элементы в DOM «переходили» в новое место. Спасибо в любом случае – DomJack

Создать html кнопку/метку с текстом и нулевой начальной шириной

ответ

Смежные вопросы