Еще одни Отделения по сравнению с проблемой Таблиц: Формы
Если у вас Office 365 Excel, используйте TEXTJOIN:
="(" & TEXTJOIN(", ",TRUE,A2:F2) & ")"
Если нет, вам нужно будет использовать IF для каждого возврата и Mid:
=MID("(" & IF(A2 <> "",", " & A2,"") & IF(A2 <> "",", " & B2,"") & IF(C2 <> "",", " & C2,"") & IF(D2 <> "",", " & D2,"") & IF(E2 <> "",", " & E2,"") & IF(F2 <> "",", " & F2,""),3,999)
5 ответов
То, что я обычно делаю:
<form>
<label for="param_1">Param 1</label>
<input id="param_1" name="param_1"><br />
<label for="param_2">Param 2</label>
<input id="param_2" name="param_2"><br />
</form>
и в CSS:
label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }
Конечно, необходимо будет определить ширину согласно фактическим данным :-)
- Во-первых, дайте маркировку и введите
display: block, так, чтобы этому можно было присвоить размер и выстроить в линию. - Они оба добираются
float: leftпотому что Проводник делает вещи немного по-другому - Отформатируйте маркировку приятно
- взломайте
brтак, чтобы был aclear: leftгде-нибудь, и я помню, что помещение его на маркировке не работало над некоторым браузером.
Плюс, с br Вы получаете хорошее форматирование, даже если браузер не поддерживает CSS :-)
Прием - когда форма становится более сложной, чем Ваш образец, Вы понимаете, что таблицы включают "гибкую сетку", которую не делают никакие другие элементы.
например, что, если "вход" более сложен, чем текстовое поле? например, набор переключателей, каждого с их владеть маркой:
Color: [____Red___][v]
Hood: [*]
Size: (_) Small
(_) Medium
(_) Large
(*) X-Large
Если все, в чем Вы нуждаетесь, является простыми формами, CSS является большим, но как только Вам нужна сетка, вещи становятся интересными...
Если бы Вы действительно хотите сделать это, я проверил бы Человека В Решении Синего, оно работает вполне прилично и очень чисто.
Хотя другие предложения, вероятно, лучше для получения перетекающего макета, литеральный ответ на вопрос - что-то как:
<form action="www.example.com"> <div class="table"> <div class="tbody"> <div class="tr"> <div class="td"> <label for="name">Name</label> </div> <div class="td"> <input id="name"> </div> </div> <div class="tr"> <div class="td"> <label for="ssn">Social Security Number</label> </div> <div class="td"> <input id="ssn"> </div> </div> </div> </div> </form>
с
<style type="text/css"> div.table { display:table; border-spacing:2px; } div.tbody { display:table-row-group; } div.tr { display:table-row; } div.td { display:table-cell; vertical-align: middle; padding:1px; } </style>
Это работает с последними версиями Firefox, Chrome, Opera и Safari. Это также работает с Бетой 2 IE8 (режим стандартов). Это не работает с IE7 или ранее, но "прогрессивное улучшение" и все это.
Люди говорят о таблицах, заставляющих их формы отобразить способ, которым они хотят, это правда, ТОЛЬКО ЕСЛИ Вы хотите отобразить свои формы в столбцах и готовы потерять семантическое значение. Со следующим HTML на месте, возможно отобразить эту форму в стольких разметках, сколько Вы могли бы пожелать.
BTW - Нет к <br />
<form>
<fieldset>
<legend>Personal Info</fieldset>
<div>
<label for="name">Name</label>
<input id="name" name="name" />
</div>
<div>
<label for="ssn">Social Security Number</label>
<input id="ssn" name="ssn" />
</div>
</fieldset>
</form>
Можно очиститься <divs> или набор их к overflow: hidden гарантировать, что плавания очищены.
Опции от вышеупомянутого HTML:
Name |==============| SSN |==============|
Name |==============|
SSN |==============|
Name |==============|
SSN |==============|
Name |==============|
SSN |==============|
Name: |==============|
SSN: |==============|
Name:
|==============|
SSN:
|==============|
Все вышеупомянутое может быть выполнено со всего несколькими строками CSS.
Когда дело доходит до радио, флажков и кнопок отправки это получает немного более сложный, но чистый семантический HTML CAN быть отображенным способ, которым Вы хотите это с помощью CSS.
Я думал о чем-то как:
<div style="text-align:right; float:left;">
Name: <input /> <br />
Social Security Number: <input /> <br />
</div>
который, если правый столбец является фиксированной длиной, выравнивает хорошо с переменной текстовой длиной, но интересно, каковы недостатки этого метода?