Alinhamento em ASP.NET C#

Question

Boa noite eu gostaria de saber como eu faço para fazer alinhamentos em ASP.NET usando estilo CSS, eu sou novo em programação web e tudo que eu queria fazer é conforme a imagem abaixo:

Fico no aguardo por uma ajuda, deste já agradeço.

Anderson Santos

Answer 1

Provavelmente você deve ter esse código em asp.net , poderia lhe mostrar usando classes em css mas vou mostrar diretamente na TAg será assim :

<%-- Primeira div -->

<div id="divEndereco" style="float:left;width:400px;">

<div style="font:18px Calibri" id="divCampoEndereco"> Endereço :
</div>


<div id="divValorEndereco">

<asp:TextBox ID="txtEndereco" runat="server" Width="300" />

</div>


</div>

<%-- Segunda div -->

<div id="divBairro" style="float:left;width:200px;margin-left:20px;">

<div style="font:18px Calibri" id="divCampoBairro"> Bairro:
</div>


<div id="divValorBairro">

<asp:TextBox ID="txtBairro" runat="server" Width="200" />

</div>


</div>

<%-- Terceira div -->

<div id="divCidade" style="float:left;width:200px;margin-left:20px;">

<div style="font:18px Calibri" id="divCampoCidade"> Cidade:
</div>


<div id="divValorCidade">

<asp:TextBox ID="txtCidade" runat="server" Width="100" />

</div>


</div>
<%-- Abaixo é para limpar o efeito de flutuante para os demais elementos -->
<div style="clear:both;"></div>

Espero ter ajudado , se lhe foi util marque como resposta.

---

Davi Murilo Referência Principal : Jesus que ilumina minha mente.
Referência Profissonal : http://www.tidm.com.br

Answer 2

Bom dia,

J. Anderson Santos nós desenvolvedores tempos um grande problema com folha de estilo, recentemente comecei a utilizar em meu projetos o bootstrap não sei se você já ouviu falar, ele é um plugin muito bom, os campos já vem com layout pronto bastando apenas adicionar algumas tags! vou te mandar o link para você dar uma olhada!

<!-- Está div com classe editor-label é o cabeçalho do campo -->

<div class="editor-label">
@Html.LabelFor(model => model.id_estado, "Estado")
</div>

<!-- Está div classe editor-field é o campo que irá receber o valor digitado ou selecionado pelo usuário -->

<div class="editor-field">
        @Html.DropDownList("id_estado", String.Empty)
@Html.ValidationMessageFor(model => model.id_estado)
</div>

com apenas este trecho de código você já mantém um layout atrativo para seu site, e ainda tem como colocar o site com layout responsivo, ou seja, seu site se torna compatível com qualquer dispositivo móvel!