CODEWITHSUNDEEP
asp.net-mvcrazor
Nate Pet
Nate Pet

Reputation: 46222

MVC View Display

I am using MVC c# with Razor 3

I have the following:

    <div> 

    </div>@Html.Label("First") &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp @Html.Label("Mi") &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp @Html.Label("Last") 



    </div>

I am using &nbsp to space between my labels. What is a more clean way of doing this. I tried with SPAN with width but was not successful.

Upvotes: 0

Views: 2498

Answers (5)

Bill
Bill

Reputation: 11

If you have not found an answer by now let me suggest this razor nugget inline style

I use this style only for prototyping but it works great.

@Html.Label("State: ", null, new { style = " margin-left:10px; width: 35px; text-align: right; display: inline-block; font-size: 12px; " }) 
@Html.TextBox("state", @Model.BUSINESS_STATE, new { style = "width:20px;", maxlength = 2 })
@Html.Label("County: ", null, new { style = " margin-left:10px; width: 45px; text-align: right; display: inline-block; font-size: 12px; " }) 
@Html.TextBox("county", @Model.BUSINESS_CNTY, new { style = "width:20px;", maxlength = 2 })

Upvotes: 1

Ed Charbeneau
Ed Charbeneau

Reputation: 4624

Here is a tutorial on using CSS to display a form. http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

Upvotes: 0

Yasser Shaikh
Yasser Shaikh

Reputation: 47774

you can use

 <table>
 <tr>
 <td width="33%">
@Html.Label("First")
</td>
 <td width="33%">
@Html.Label("Mi")
</td>
<td width="33%">
@Html.Label("Last") 
</td>
</tr>
</table>

OR ...

<div style="width:300px;float:left;">
@Html.Label("First")
</div>
<div style="width:300px;float:left;">
@Html.Label("Mi")
</div>
<div style="width:300px;float:left;">
@Html.Label("Last") 
</div>

Upvotes: 0

Joao Leal
Joao Leal

Reputation: 5542

Stylesheets

You can use a css grid framework like blueprint css or you can add a margin right to the label:

<label style="margin-right: 50px">First</label><label>Last</label>

Upvotes: 0

Har
Har

Reputation: 5004

Combine the Variables and set the style sheet of that label to use word spacing

ex. word-spacing:30px;

You can add the css attribute as follows 

@Html.Label("CompleteName", new {@class='WordSpacer'})

<style>
.WordSpacer {
    word-spacing:30px;
}
</style>

Upvotes: 0

Related Questions