[ACCEPTED]-Label and text box on the same line using css-asp.net-mvc
I typically float my label left and the 3 input lines up next to it. Here's an example: http://jsfiddle.net/qXFLa/
Here's 2 an example of how I'd rearrange your code:
<div class="editor">
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
</div>
Then, for 1 your css:
.editor label {
float: left;
width: 30px; // just putting an example here - but give them a width to align better
text-align: right; // this right-aligns them with the input
}
.editor input[type=text] {
width: 80px; // just putting an example value in here to make your inputs uniform in length
margin: 0 0 0 10px; // just some breathing room from the labels
}
I'm using this css
.editor-label
{ display: block;
float: left;
padding: 0;
width: 150px;
margin: 1em 1em 0 0;
}
.editor-field
{
width:auto;
margin: 0.5em 0 0 0;
overflow: auto;
min-height: 2em;
}
0
Although i have not tried the accepted answer 6 by kinakuta, it requires you to re-arrange 5 the Visual Studio generated view; I would 4 approach as follows, if you don't want to re-arrange the autogenerated layout., i.e. to keep the 3 format
<div class="editor-label" />
<div class="editor-field" />
<div class="editor-label" />
<div class="editor-field" />
etc...
The following CSS appears to work 2 for me. Feel free to offer improvements. (it 1 looks very similar to the answer by Pa0l0)
<style type="text/css">
.editor-label, .display-label
{
clear:both;
float:left;
width:150px;
margin:1em 0 0 0;
font-weight:bold;
}
.editor-field, .display-field
{
margin:1em 0 0 0;
min-height:1.5em;
}
</style>
A few of these answers wasn't quite what 2 I was looking for. This bit in my CSS seems 1 to work for my needs.
input,
select,
textarea{
display:inline-block !important;
}
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.