form - label - input. Заступает текст

ZoomAll · February 7, 2012

Приветствую всех.

Проблема в следующем:

игры с параметрами padding и margin для form, label, input

не дало результата - текст все-равно заступает за чекбокс.....

вот код:

<html>
 <head>
  <title>test</title>
   <style type="text/css">
	form {padding: 0 0 0 5; margin: 0 0 0 5;}
  </style>
 </head>
 <body>

<form><label><input type="checkbox">So I've been experimenting with different margins and paddings on lists, and so far I can't seem to figure it out. The object I'm after seems simple enough; I want less of an "indent" (is that padding or margin?) on the left edge. In other words, I want the little dots to be right at the edge of the containing box.</label><br/> 
<form><label><input type="checkbox">So I've been experimenting with different margins and paddings on lists, and so far I can't seem to figure it out. The object I'm after seems simple enough; I want less of an "indent" (is that padding or margin?) on the left edge. In other words, I want the little dots to be right at the edge of the containing box.</label><br/> 
</body>
</html>

Edited February 7, 2012 by ZoomAll

rash · February 7, 2012

Можно задать марджин для лейбла, освободив место справа, и вынести туда чекбокс абсолютом, отрицательным марджином или хоть текст-индентом.

А можно с помощью дополнительного элемента, но, пожалуй, даже незачем в вашем случае так делать.

ZoomAll · February 7, 2012

Можно задать марджин для лейбла, освободив место справа, и вынести туда чекбокс абсолютом, отрицательным марджином ...

Посмотрите, слепляется все:

код:

<html>
 <head>
  <title>test</title>
   <style type="text/css">
		label {margin: 0 0 0 5;}
		input {position: absolute; margin: 0 0 0 -5;}
  </style>
 </head>
 <body>

<form><label><input type="checkbox">So I've been experimenting with different margins and paddings on lists, and so far I can't seem to figure it out. The object I'm after seems simple enough; I want less of an "indent" (is that padding or margin?) on the left edge. In other words, I want the little dots to be right at the edge of the containing box.</label><br/> 
<form><label><input type="checkbox">So I've been experimenting with different margins and paddings on lists, and so far I can't seem to figure it out. The object I'm after seems simple enough; I want less of an "indent" (is that padding or margin?) on the left edge. In other words, I want the little dots to be right at the edge of the containing box.</label><br/> 
</body>
</html>

отрицательный text-indent тоже к сожалению не дал результата - строки слепились

подскажите, что я не так делаю

Switch74 · February 7, 2012


<style>
   label{position:relative;display:block;padding-left:20px;background:#bbb;}
   input{position:absolute;left:3px;top:3px;}
</style>

<form>
   <label><input type="checkbox">So I've been experimenting with different margins and paddings on lists, and so far I can't seem to figure it out. The object I'm after seems simple enough; I want less of an "indent" (is that padding or margin?) on the left edge. In other words, I want the little dots to be right at the edge of the containing box.</label>
   <label><input type="checkbox">So I've been experimenting with different margins and paddings on lists, and so far I can't seem to figure it out. The object I'm after seems simple enough; I want less of an "indent" (is that padding or margin?) on the left edge. In other words, I want the little dots to be right at the edge of the containing box.</label>
</form>

Edited February 7, 2012 by Switch74

ZoomAll · February 7, 2012

Switch74, помогло. Не могу плюсануть говорят нет доступных на сегодня плюсов

спасибо

спасибо всем кто откликнулся

попробую в реальном коде, посмотрим что получится

rash · February 7, 2012

А в вашем неработающем примере начните с того, что укажите единицы измерения для полей

ZoomAll · February 7, 2012

А в вашем неработающем примере начните с того, что укажите единицы измерения для полей

вы имеете ввиду указать "em" или "px"? если я вас правильно понял, то указав для margin поочередно каждое из них получил точно такой же некорректный "слипшийся" результат

rash · February 7, 2012

А в вашем неработающем примере начните с того, что укажите единицы измерения для полей
вы имеете ввиду указать "em" или "px"? если я вас правильно понял, то указав для margin поочередно каждое из них получил точно такой же некорректный "слипшийся" результат

Ну да, и блочности не хватило лейблам )

<!DOCTYPE html>
<html>
 <head>
  <title>test</title>
   <style type="text/css">
                label {margin: 0 0 0 15px; display: block;}
                input {position: absolute; margin: 0 0 0 -15px;}
  </style>
 </head>
 <body>

<form><label><input type="checkbox">So I've been experimenting with different margins and paddings on lists, and so far I can't seem to figure it out. The object I'm after seems simple enough; I want less of an "indent" (is that padding or margin?) on the left edge. In other words, I want the little dots to be right at the edge of the containing box.</label><br/> 
<form><label><input type="checkbox">So I've been experimenting with different margins and paddings on lists, and so far I can't seem to figure it out. The object I'm after seems simple enough; I want less of an "indent" (is that padding or margin?) on the left edge. In other words, I want the little dots to be right at the edge of the containing box.</label><br/> 
</body>
</html>

ZoomAll · February 7, 2012

rash, спасибо за потраченное время, все работает

тока немного чекбоксы вверх уехали, вот поправил

<html>
 <head>
  <title>test</title>
   <style type="text/css">
                label {margin: 4px 0 0 15px; display: block;}
                input {position: absolute; margin: 4px 0 0 -15px;}
  </style>
 </head>
 <body>

<form><label><input type="checkbox">So I've been experimenting with different margins and paddings on lists, and so far I can't seem to figure it out. The object I'm after seems simple enough; I want less of an "indent" (is that padding or margin?) on the left edge. In other words, I want the little dots to be right at the edge of the containing box.</label><br/> 
<form><label><input type="checkbox">So I've been experimenting with different margins and paddings on lists, and so far I can't seem to figure it out. The object I'm after seems simple enough; I want less of an "indent" (is that padding or margin?) on the left edge. In other words, I want the little dots to be right at the edge of the containing box.</label><br/> 
</body>
</html>

Sign In

form - label - input. Заступает текст

Question

ZoomAll

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

rash

Link to comment

Share on other sites

ZoomAll

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

ZoomAll

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

ZoomAll

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

ZoomAll

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information