2

Não consigo alinhar os meus labels (Razor) a esquerda da minha tabela em html, com o Visual Studio!

<table cellspacing="6">        
    <tr >
        <td >
            @Html.Label("Cep: ")
        </td>            
          <td  >
            @Html.Label("Endereco: ")

          </td>
        <td >
            @Html.Label("Número: ")
        </td>
    </tr>

    <tr>
        <td >
            @Html.TextBoxFor(e => e.CEP, new { maxlength = "9", id = "Cep", name = "Cep", onchange = "findCEP()" })
        </td>

        <td >
            @Html.TextBoxFor(e => e.DescricaoEndereco, new { maxlength = "50", id = "Endereco", name = "Endereco" })
        </td>

        <td>
            @Html.TextBoxFor(e => e.Numero, new { maxlength = "50", id = "Numero", name = "Numero" })
        </td>
    </tr>
    <tr>
        <td >
            @Html.Label("Complemento: ")
        </td>
    </tr>
    <tr>
        <td >
            @Html.TextBoxFor(e => e.Complemento, new { maxlength = "50", id = "Complemento", name = "Complemento" })
        </td>
    </tr>
    <tr>
        <td >
            @Html.Label("UF: ")
        </td>

        <td >
            @Html.Label("Cidade: ")

        </td>
        <td >
            @Html.Label("Bairro: ")
        </td>
    </tr>
    <tr>
        <td>
            @Html.DropDownListFor(e => e.UF, Model.UFList, new { id = "UF", name = "UF" })
        </td>
        <td>
            @Html.TextBoxFor(e => e.Cidade, new { maxlength = "40", id = "Cidade", name = "Cidade" })
        </td>
        <td>
            @Html.TextBoxFor(e => e.Bairro, new { maxlength = "50", id = "Bairro", name = "Bairro" })
        </td>
    </tr>

</table>

5 Respostas 5

1

O texto já é alinhado à esquerda por padrão.
Contudo se quiseres alinhar todo o texto dentro da tabela à esquerda podes utilizar o seguinte:

<table cellspacing="6" style="text-align:left;"> ... </table>

Para alinhar todo o texto da tabela à direita, utiliza:

<table cellspacing="6" style="text-align:right;"> ... </table>

Para alinhar apenas certos td/tr da tabela, cria uma class ou um id com o nome que desejares, e implemente-a no código CSS aplicando-lhe o estilo text-align:left; e também no código de marcação como no exemplo abaixo:

<!-- Código CSS -->
<style>
.alinhadoEsquerda {text-align:left;}
.alinhadoCentro {text-align:center;}
.alinhadoDireita {text-align:right;}

.textoRealce-E {color:#2C55FF;}
.textoRealce-C {color:green;}
.textoRealce-D {color:red;}

td {padding: 8px; border: 1px solid #E4E4E4;}
</style>

<!-- Código da Tabela -->
<table cellspacing="6">        
    <tr>
        <td class="alinhadoDireita">
            <span class="textoRealce-D">Alinhado à direita</span>
            @Html.Label("Cep: ")
        </td>            
        <td class="alinhadoEsquerda">
            <span class="textoRealce-E">Alinhado à esquerda</span>
            @Html.Label("Endereco: ")
            
        </td>
        <td class="alinhadoCentro">
            <span class="textoRealce-C">Alinhado ao centro</span>
            @Html.Label("Número: ")
        </td>
    </tr>
</table>

Nota: No exemplo acima eu coloquei o código CSS e HTML todo junto propositadamente porque tenho um palpite e algo me diz que estás a criar isto sem utilizar uma folha de estilos.

Mas a melhor maneira de se fazer isto seria colocar o código CSS dentro de uma folha de estilos para separar o código HTML do CSS pois foi para isso que as folhas de estilo foram criadas.

0

Você pode criar uma classe CSS, como a seguir:

.alinhamento {
  text-align: left;
}

E então adicionar essa classe aos elementos td, manualmente via HTML ou pelo asp.NET-MVC (O qual eu não tenho conhecimento e não sei se pode executar tal tarefa).

0

Uma forma seria assim:

<td class="left-align">@Html.Label("Cep: ")</td>

Você precisa de uma classe css:

.left-align { text-align: left; }

Porém você não precisa usar um label nesse caso. Considere usar @Html.DisplayFor(m => m.Field) que utiliza o valor do atributo [Display] da classe. Dessa forma, caso seja necessário alterar o display do model a sua view irá refletir essa alteração.

Se você considera estritamente necessário usar um label, então pode usar o @Html.LabelFor(m => m.Field)

Na classe:

public class Cliente 
{
    [Display(Name = "Número")]
    public string Numero { get; set; }
...

E o seu cshtml:

<table cellspacing="6">        
    <tr>
        <td class="left-align">
            @Html.DisplayFor(m => m.CEP)
        </td>            
         <td class="left-align">
            @Html.DisplayFor(m => m.DescricaoEndereco)    
          </td>
        <td class="left-align">
            @Html.DisplayFor(m => m.Numero)
        </td>
    </tr>
...
0

Ao invés de ter que acrescentar uma classe para cada tag td, você pode colocar uma classe dentro da tag table

<table cellspacing="6" class="align-left">

e no css

.align-left td{
    text-align: left;
}

isso significa que toda tag td que estiver dentro de uma tag table que tenha a classe align-left vai receber o alinhamento de texto a esquerda.

0

Já tentou criar uma classe no CSS e colocar essas classes nas labels?
Por exemplo:

.alinha_a_esquerda{
    text-align:left;
}

E coloque no HTML:

<label class="alinha_a_esquerda">...</label>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .