ГЛАВНАЯ     АРХИВ     НАПИСАТЬ АДМИНУ     ПОДПИСАТЬСЯ НА RSS     ВОЙТИ      

Поиск

Категории

Облако тегов

  << Предыдущий пост       Следующий пост >>  
От: 4aIIaeB
14. марта 2012 13:11

Недавно я делал HTML фоорму, которая включала массу checkbox-ов. Клиент хотел, чтобы место между чекбоксами и текстом было уменьшено. Очевидным решением было бы уменьшить margin и padding вокруг CheckBox-ов. Однако..! Такое решение не работает одинаково на разных броузерах ! И поэкспериментировав, я сэмулировал такой эффект, используя ширину checkbox-а. Вот как это можно сделать:

<html xmlns="http://www.w3.org/1999/xhtml">

<
head>
<
meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<
title>Reduce Padding</title>
<
style type="text/css">
div
{
border:solid 1px;
}
input.chk {
width: 10px;
margin:0;
}
</style>
</
head>

<
body>
<
div>
<
input id="Checkbox1" type="checkbox"/> One <br />
<
input id="Checkbox2" type="checkbox"/> Two <br />
<
input id="Checkbox3" type="checkbox" class="chk"/> Three <br />
<
input id="Checkbox4" type="checkbox" class="chk"/> Four
</div>
</
body>

</
html>

Output

image

Проверьте первые два checkbox-а, которые имеют ширину, внутренние и внешние отступы по умолчанию. А потом посмотрите на последние два checkbox-а, которые имеют уменьшеные ширину, margin и padding.

Этот трюк сохранит время, тем кто пытается добиться того же эффекта используя только свойства margin и padding. Главная идея приема, состоит в том, чтобы изменятиь также и свойство - ширина.



Это перевод. Оригинал здесь.

Похожие записи


Вопросы на собеседовании C#, Net, ASP.NET, SQL
Продолжая тему вопросов на собеседовании. Нашел еще одну подборку. Оригинал лежит здесь . Перенес, чтобы не затерялось. Есть вполне вменяемые ответы (хотя, на некоторые вопросы ответил бы по-другому). Ответы находятся после списка вопросов, я их не менял. 23. Что такое шаблон проектирования Model/View/Controller? Как и зачем его применяют? 2...

Как передать функцию как параметр в другую функцию на JavaScript ?
Часто бывают ситуации, когда хочется (было бы удобно) передать функцию как параметр в другую функцию, и там использовать. И все это заметьте на JavaScript-е. Рассмотрим пример того, как это можно сделать. [code:c#] <script type="text/javascript"> function fOne(p1, p2) { p1(p2); } /* function literal */ var fTwo = function (m1) { alert(m1 ...

Как удалить рамку вокруг картинок-ссылок, используя CSS ?
Поместите изображение внутрь ссылки и добавьте к нему границу. Это обычно делается для визуальной индикации пользователю о том, что изображение - ссылка. Посмотрите этот пример:<body> <a href="http://www.dotnetcurry.com"> <img alt="progress" src="images/abc.jpg" /> </a></body> Если у вас есть требование преодолеть такое ...

Добавить комментарий




biuquote
  • Комментарий
  • Предпросмотр
Loading


  Сохранить комментарий