Взаимное расположение маркера checkbox и его текста

SerDiz · October 13, 2007

Для списков имеется свойство CSS list-style-position с параметром outside.

Имеется форма с несколькими checkbox или radio-кнопками. Можно ли с помощью CSS сделать так, чтобы маркеры checkbox или radio находились за пределами их текстового блока, подобно списку с параметром outside?

rash · October 13, 2007

а если "вытянуть" их за пределы блока относительным позиционированием?

Вообще, зачем это делать? Может можно добиться необходимого результата иначе?

Vlad · October 18, 2007

Использовать float, как вариант.

SerDiz · October 18, 2007

rash спрашивает "зачем это делать?". Просто, чтобы смотрелось лучше!

Насчет использования float мысль, конечно, интересная, правда, не очень представляю, каким образом его в данном случае использовать.

Кстати, недавно приобрел книгу Влада Мержевича "HTML и CSS на примерах", сижу, изучаю. К сожалению, ответа на свой вопрос не нашел, но книга классная, всем могу посоветовать.

Tokolist · October 18, 2007

не пойму в чем проблема? таблици что отменили уже?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
/* <![CDATA[ */
table.checklist {
 border-collapse: collapse;
}

table.checklist td {
 vertical-align: top;
}
/* ]]> */
</style>
</head>
<body>
<table class="checklist">
<tr>
<td><input type="checkbox" checked="checked" /></td>
<td>Для списков имеется свойство CSS list-style-position с параметром outside. 
Имеется форма с несколькими checkbox или radio-кнопками. Можно ли с помощью CSS 
сделать так, чтобы маркеры checkbox или radio находились за пределами их текстового 
блока, подобно списку с параметром outside?</td>
</tr>
<tr>
<td><input type="checkbox" checked="checked" /></td>
<td>Для списков имеется свойство CSS list-style-position с параметром outside. 
Имеется форма с несколькими checkbox или radio-кнопками. Можно ли с помощью CSS 
сделать так, чтобы маркеры checkbox или radio находились за пределами их текстового 
блока, подобно списку с параметром outside?</td>
</tr>
</table>
</body>
</html>

SerDiz · October 23, 2007

Tokolist спрашивает "не пойму в чем проблема? таблици что отменили уже?"

Конечно, можно добиться желаемого с помощью таблиц. Но хотелось бы узнать, можно ли это сделать средствами CSS!

Раз эксперты молчат, значит такой возможности нет или ее реализация слишком сложна!

Чтож, отрицательный ответ тоже ответ.

Спасибо всем, кто ответил!

klierik · October 24, 2007

position:relative; ?!

maddogrts · October 24, 2007

SerDiz

Неофит

Выложи код и картинку чего ты хочешь сделать , думаю если мы увидим желаймый результат сразу все поймем и скажим че делать

Tokolist · October 24, 2007

Tokolist спрашивает "не пойму в чем проблема? таблици что отменили уже?"
Конечно, можно добиться желаемого с помощью таблиц. Но хотелось бы узнать, можно ли это сделать средствами CSS!

Можно конечно... Но нужно ли?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
ul,ol {list-style: none;}
ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote {margin: 0; padding: 0;}

ul.checkboxes {
 padding-left: 30px;
}

ul.checkboxes li {
 position: relative;
}

ul.checkboxes li input {
 position: absolute;
 left: -25px;
 top: 2px;
}
/*]]>*/
</style>
</head>
<body>
<ul class="checkboxes">
<li><input type="checkbox" checked="checked" />Это небольшое устройство предназначено для конвертирования Serial ATA и Parallel ATA. 
Двунаправленный конвертор может пригодиться, когда ваша материнская плата не поддерживает SATA диски, 
или наоборот, когда SATA разъемов на материнской плате много, а PATA нет, тогда через конвертор можно 
присоединить обычный IDE диск к плате с контроллером SATA.</li>
<li><input type="checkbox" checked="checked" />Это небольшое устройство предназначено для конвертирования Serial ATA и Parallel ATA. 
Двунаправленный конвертор может пригодиться, когда ваша материнская плата не поддерживает SATA диски, 
или наоборот, когда SATA разъемов на материнской плате много, а PATA нет, тогда через конвертор можно 
присоединить обычный IDE диск к плате с контроллером SATA.</li>
<li><input type="checkbox" checked="checked" />Это небольшое устройство предназначено для конвертирования Serial ATA и Parallel ATA. 
Двунаправленный конвертор может пригодиться, когда ваша материнская плата не поддерживает SATA диски, 
или наоборот, когда SATA разъемов на материнской плате много, а PATA нет, тогда через конвертор можно 
присоединить обычный IDE диск к плате с контроллером SATA.</li>
</ul>
</body>
</html>

SerDiz · October 31, 2007

Спасибо Tokolist за приведенный код. Действительно, с помощью таблиц реализовать подобное гораздо проще.

Кстати, может поясните неофиту, для чего в блоке

Sign In

Взаимное расположение маркера checkbox и его текста

Question

SerDiz

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

rash

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

SerDiz

Link to comment

Share on other sites

Tokolist

Link to comment

Share on other sites

SerDiz

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

maddogrts

Link to comment

Share on other sites

Tokolist

Link to comment

Share on other sites

SerDiz

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information