Выравнивание меток по входным данным

davkms

Привет, ребята, Я все еще работаю над этой бесконечной формой и снова здесь с еще одной проблемой. CSS-один.

По какой-то причине метки и флажки вообще не находятся на одной строке!

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

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

Вот над чем я работаю в данный момент.

  <label for="var1">Var1 </label><input type="text" name="var1" id="var1" />


<label for="var2">Var2 </label><input type="text" name="var2" id="var2" /> 


<label for="select1">Select Stage</label>


<select name="select1" id="select1">


<option value="0" selected="selected">Stage 0</option>


<option value="1">Stage 1</option>


<option value="2">Stage 2</option>


<option value="3">Stage 3</option>


</select>


<label for="opt1">Check option 1: </label><input name="opt1" type="checkbox" id="opt1" />

Код (CSS):

 input{ display: block; border: 1px solid #ccc; margin-bottom:18px; } label { display: inline-block; margin-bottom: 0.5em; float: left; clear: left; padding-top: 5px; padding-right: 5px; }

HTML: Спасибо!

ddpp203

... и его структура имеет какое-то отношение к значению ДРУГОЕ, а не к тому, чтобы сделать его неразборчивым и вообще непонятным, ЗРЯЧИЕ ИЛИ НЕТ? Для литературы это то же самое, что Лиза, стоящая на коленях перед Бартом, — это дизайн логотипа.

Документирование структуры — это то же самое, что проект Experience Music Project, Vidara Hotel и Walkie Talkie для архитектуры.

Вычурная чушь, не подходящая ни человеку, ни зверю.

В нем весь стиль, проза и креативность: размазать вазелин по объективу фотоаппарата, поссать в банку с крестом, а потом попытаться получить за это гуманитарный грант!

Есть причина, по которой я считаю Э. Э. Каммингса бездарным понтцем, чье «искусство» заключается в том, чтобы на самом деле писать, что такое новая одежда Императора.

Точно так же, как другие мошенники садового типа «замученный художник», наживающийся на невежестве и претенциозности изнеженной «культурной элиты», кульминацией которой стало движение «современного искусства». О, это было нормальное движение, просто ни у кого не хватило здравого смысла смыться. Вот почему «Джо с улицы» НА САМОМ ДЕЛЕ думает, что Пикассо и Уорхол были чудаками, торгующими змеиным маслом, которые не умели рисовать, но никогда не признавали, что это было их мнение, из-за страха, что их назовут плебеями.

Эффект свидетеля в действии.

ВСЕ знают, что это чушь, но никто не желает первым прямо признать это!

По крайней мере, причудливое дерьмо Дали выглядит так, будто для этого потребовался талант.

Знаете, как человек, который любит искусство, я испытываю явное отвращение к тому моменту, когда вещи превращаются из творения художника (произносится нормально) в художника (произносится как R-teast). В тот момент, когда это происходит, это всегда кажется хулиганством в магазине по десять центов, торгующим змеиным маслом, вуду «пять и десять». В этом Каммингс был настоящим мастером.

Сравнения с другими торговцами, такими как Уорхол, очевидны. Но, как сказал бы Линдерман, «Ты будешь танцевать под что угодно».

«Я встретил Энди Уорхола на шикарной вечеринке!»
Выпусти свою прическу, потому что ты работаешь у Харди.
Пятьдесят фунтов макияжа на коже этой художественной школы,
Пятьдесят баллов I.Q. расположен внутри...

Владимир Сергеевич

Вообще-то, нет.

Это структурный элемент, поскольку само форматирование имеет значение.

Это восходит, по крайней мере, к HTML v2, написанному Т. Бернерсом-Ли и Д. Коннолли. В поэзии форма текста часто является неотъемлемой частью смысла или намерения.

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

Анастасия_1

Кажется, что вы стали жертвой множества вещей, хотя вас никогда не учили, что вы начинаете с простого HTML и добавляете только минимум, чтобы он отображался так, как вы хотите.

HTML будет отображаться довольно хорошо сам по себе.

Пусть это будет, когда сможешь. Я изменил только две вещи в вашей структуре; Я обернул элемент метки вокруг ввода.

Это позволило мне минимизировать требования CSS, например, поля и потерю ненужных плавающих элементов.

Ярлыки сделаны блочными и служат контейнером для управления формой.

Другим структурным изменением было добавление элемента fieldset.

Это контейнер для группы связанных элементов управления формой, который позволяет рассматривать его и его содержимое как единое целое, подобно тому, как div является универсальным контейнером-агрегатором.

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

 


<!DOCTYPE HTML>


<html lang="en">


<head>


<meta charset="utf-8">


<meta content=


"ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1"


name="viewport">


<title>


Test document


</title>


<style type="text/css">


/*<![CDATA[*/


body {


background-color: white;


color: black;


font: 100%/1.5 sans-serif;


margin: 0;


padding: 1em;


}


p {


font-size: 1em;


}


#wrapper {


border: 1px solid black;


margin: 0 auto;


width: 90%;


}


input {


border: 1px solid #ccc;


}


label {


display: block;


margin-bottom: 0.5em;


padding-top: 5px;


padding-right: 5px;


}


/*]]>*/


</style>


</head>


<body>


<div id="wrapper">


<fieldset>


<legend>Test form</legend>


<label for="var1">Var1


<input id="var1"


name="var1"


type="text">


</label>


<label for="var2">Var2


<input id="var2"


name="var2"


type="text"></label>


<label for="select1">Select Stage


<select id="select1"


name="select1">


<option selected="selected"


value="0">


Stage 0


</option>


<option value="1">


Stage 1


</option>


<option value="2">


Stage 2


</option>


<option value="3">


Stage 3


</option>


</select>


</label>


<label for="opt1">Check option 1:


<input id="opt1"


name="opt1"


type="checkbox">


</label>


</fieldset>


</div>


</body>


</html>

Код (разметка): gary

nastya_s

Мне не нравится ваша исходная разметка И решение Гэри по одной простой причине... как это полезно, когда CSS не применяется? Программы чтения с экрана (Программное обеспечение, которое читает страницу вслух), считыватели Брайля, поисковые системы и т. д. и т. п. есть ли какая-то явная причина, по которой вы злитесь на семантику и удобство использования, балуясь с display

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

krivoyrog

Всю школьную жизнь меня учили, что эту функцию выполняют запятая и точка с запятой.

Разрывы строк лучше всего улучшают разборчивость.

Легче читать столбец, чем читать строку.

На мой взгляд, это элемент презентации, за исключением редких случаев.

Если ваш текст требует разрыва строки, например, адрес или стихотворение, у нас есть элемент PRE. Гэри

maratomaev

«Структурное определение» — тогда почему абзацы называются ПАРАГРАФАМИ, заголовки — заголовками, а списки — списками? Хотя, честно говоря, мы все готовы интерпретировать это как угодно.

Если вы знакомы с профессиональными текстами (например, научными или юридическими документами), вы склоняетесь к моему образу мыслей.

не знаю, на чем основан ваш, но, вероятно, это что-то похожее.

Измученная часть, представляющая собой весь беспорядок, который представляет собой спецификацию HTML, НЕ дает четкого определения ничего из этого.

(хотя, по крайней мере, HTML 5 НАКОНЕЦ говорит, что такое горизонтальное правило семантически!)

Вот почему я возвращаюсь к нормам профессионального письма, чтобы понять, почему заголовки выравниваются, абзацы предназначены для грамматических абзацев в потоке текста, DIV предназначены для общих разрывов разделов, которые не подразумевают и не меняют значения - ТАКЖЕ, как типы научных, юридических и коллегиальные документы TBL созданы для его передачи.

И это кажется ***тонной боли со стороны CSS только для того, чтобы не говорить

. и полностью отказаться от CSS.

Я мог бы представить себе эту проблему только в том случае, если бы вы пытались масштабировать входные данные до гибкой ширины, чтобы они ВСЕГДА соответствовали доступному пространству - и здесь все становится НАМНОГО сложнее.

1q2w12qw

Они же разделители.

Запятая — пауза в предложении для разделения связанных мыслей.

Точка с запятой — разделитель между концептуальными фразами или суперзапятая, когда для разделения необходимы запятые.

Точка – полная остановка, конец предложения.

Разрыв – граница между подэлементами целостной мысли.

Правило -- изменение темы/раздела.

Технически символ вертикального разрыва "|" (или, как говорят любители *nix, это «труба») и горизонтальное правило — оба являются правилами. У запятых и разрывов много общего, но разрыв часто лучше всего воспринимать как супер-супер-запятую.

Они существуют по грамматической причине.

PRE НЕ передает это значение, он просто говорит, что текст «предварительно отформатирован», что фактически может означать что угодно! подразумевает смысл абзаца, одного или нескольких предложений, образующих законченную мысль.

Пара метка-вход не считается таковой.

NOR - это одинокий образ из-за своего одиночества, или какой-то другой мусор, который люди окружают.

Если вы используете его ТОЛЬКО как привязку к стилю, используйте DIV, чтобы указать, что это общий блок.

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

(помните, что DIV семантически нейтрален).

Использование PRE — это дешевая отговорка, позволяющая избежать вообще какой-либо семантики, навязывая не что иное, как бесконечный текст без разделителей пользователям, которые не могут видеть предварительное форматирование! Помните, что предварительное форматирование — это ВИЗУАЛЬНАЯ концепция, не применяющая НИКАКОЙ семантики или значений, поэтому использование его для чего-то вроде стихотворения — это приказ незрячим пользователям идти нахер.

Это своего рода противоположность тому, для чего был создан HTML... Если бы вы ДОЛЖНЫ были использовать PRE в стихотворении, надеясь, что CRLF передаст смысл, это не так. В этом случае вам понадобятся запятые ДОПОЛНИТЕЛЬНО к символам форматирования… и в этот момент просто используйте чертов разрыв! Хотя на вашей странице по этой теме используется проза, в которой есть запятые и точки с запятой.

Многие этого не делают.

То, как вы это написали, вполне нормально, поскольку в дополнение к CRLF у вас есть существующие разделители.

Не все стихи/проза работают таким образом.

См. Лавкрафта там, где были его старые произведения, но ближе к смерти он полагался не на знаки препинания, а на пробелы. Опять же, помните, что все HTML-теги (кроме DIV, SPAN и A) ПРЕДПОЛАГАЮТСЯ для представления того, каким контент, который они оборачивают, БУДЕТ БЫТЬ в соответствии с грамматическими и профессиональными нормами письма, а НЕ тем, как они должны выглядеть.

Следовательно, структура абстрактна, а не нормативна.

... и почему в PRE на самом деле нет никакой чертовой деловой прозы.

_nastya_

Потому что это название «одного из нескольких отдельных подразделений текста, предназначенных для разделения идей». Абзац — это структурное имя по умолчанию для выделенного текста. Более конкретные формы могут иметь другие названия, например. заголовки, списки и т. д. Гэри

Похожие темы	Дата
Можно ли быть дизайнером без образования?	19.10.2024, 18:10
нужна статья из журнала "Design review"	19.10.2024, 18:10
Общение дизайнеров	19.10.2024, 18:10
Wordpress – отображать плагин как статическую страницу?	19.10.2024, 18:10
Помните MyBlogLog? Есть альтернатива?	19.10.2024, 18:10
Мобильные проблемы	19.10.2024, 18:10
Форма обратной связи ! Помоги мне....	19.10.2024, 18:10
Пожалуйста, кто-нибудь, что это за код (зашифрованный или что)	19.10.2024, 18:10
3 мега-ниши для блога с огромным доходом	19.10.2024, 18:10
Попытка создать страницу продаж в Udesign: нужно удалить заголовок + боковую панель: D	19.10.2024, 18:10

Выравнивание меток по входным данным

davkms

ddpp203

Владимир Сергеевич

Анастасия_1

nastya_s

krivoyrog

maratomaev

1q2w12qw

_nastya_

I AM

Интересно