2011-12-19 3 views
1

Мне было интересно, как организовать организацию компонентов в веб-приложении C# в Visual Studio.Visual Studio 2010 - Организация макета веб-приложения на уровне компонента

Форма содержит серию текстовых полей, каждая из которых имеет собственную метку. Поскольку метки все различаются по длине, это вызывает некоторые проблемы выравнивания:

enter image description here

Каковы лучшие практики для организации веб-компонентов (например, 1, 2, 3 колонный структуры) в рамках проекта веб-приложений? При разработке проекта Windows Form на панели инструментов отображаются контейнеры, из которых вы можете выбрать такие вещи, как TableLayout и т. Д., Но когда в веб-приложении панель инструментов не предлагает эту опцию.

ответ

1

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

<fieldset>  
<ul> 
    <li><label for="<%= txtField1.ClientID %>">Field name</label><asp:TextBox id="txtField1" runat="server"></asp:TextBox></li> 
</ul> 
</fieldset> 

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

ul li{list-style-type:none;width:400px} 
ul li label{float:left;width:150px;} 
ul li input, ul li select, ul li textarea{float:left;width:224px;margin-left:6px} 
ul li input[type=checkbox], ul li input[type=radio]{width:auto} 

и некоторые другие форматирования биты специфичные для моего CSS/шаблон

1

Вы либо хотите использовать таблицу или CSS на основе решения (например, упоминает Kolin).

В некоторых исследованиях показано, что надпись «ВЫШЕ» на самом деле «быстрее обрабатывается» с точки зрения пользователя. Таким образом, вы можете создать свои формы вокруг этой парадигмы.

+0

См. Эту статью для получения дополнительных сведений и преимуществ/недостатков для различных макетов: http://www.lukew.com/resources/articles/web_forms.html –