सीएसएस

Question

का उपयोग करते हुए उसी पंक्ति पर लेबल और टेक्स्ट बॉक्स एक नया asp.net mvc3 ऐप बनाते समय आपको लॉगऑन मिलता है और पाठ फ़ील्ड के ऊपर वाले लेबल के साथ फॉर्म पंजीकृत करता है। मैं काम नहीं करता है

@using (Html.BeginForm()) { 
<div> 
    <fieldset> 
     <legend>Account Information</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(m => m.UserName) 
     </div> 
     <div class="editor-field"> 
      @Html.TextBoxFor(m => m.UserName) 
      @Html.ValidationMessageFor(m => m.UserName) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(m => m.Password) 
     </div> 
     <div class="editor-field"> 
      @Html.PasswordFor(m => m.Password) 
      @Html.ValidationMessageFor(m => m.Password) 
     </div> 

     <div class="editor-label"> 
      @Html.CheckBoxFor(m => m.RememberMe) 
      @Html.LabelFor(m => m.RememberMe) 
     </div> 

     <p> 
      <input type="submit" value="Log On" /> 
     </p> 
    </fieldset> 
</div> 

सीएसएस इसलिए दोनों लेबल और क्षेत्र एक ही लाइन पर हैं कि इसे बदलने और

निम्नलिखित गठबंधन करना चाहते हैं:

.display-label, 
.editor-label 
{ 
     display:inline-block; 
     width: 200px;  
     text-align: right; 
     margin-right: 10px; 

} 

.display-field, 
.editor-field 
{ 
    display:inline-block; 
    margin: 0.5em 0 0 0; 
} 

Answer 1

मैं आम तौर पर तैरने लगते हैं मेरे लेबल बाएं और इसके आगे इनपुट लाइनें। http://jsfiddle.net/qXFLa/

यहाँ है कि कैसे मैं अपने कोड को पुनर्व्यवस्थित चाहते हैं का एक उदाहरण:

<div class="editor"> 
    @Html.LabelFor(m => m.UserName) 
    @Html.TextBoxFor(m => m.UserName) 
    @Html.ValidationMessageFor(m => m.UserName) 
</div> 

फिर, अपने सीएसएस के लिए: यहाँ एक उदाहरण है

.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 
} 

Answer 2

मैं इस सीएसएस

उपयोग कर रहा हूँ

.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; 
} 

Answer 3

हालांकि मैंने किनाकुता द्वारा स्वीकृत उत्तर की कोशिश नहीं की है, इसके लिए आपको विजुअल सेंट को फिर से व्यवस्थित करने की आवश्यकता है udio उत्पन्न दृश्य; यदि आप स्वत: उत्पन्न लेआउट को पुन: व्यवस्थित नहीं करना चाहते हैं, तो मैं निम्नानुसार तक पहुंचूंगा। है, यानी प्रारूप

<div class="editor-label" /> 
<div class="editor-field" /> 

<div class="editor-label" /> 
<div class="editor-field" /> 

etc... 

निम्नलिखित सीएसएस मेरे लिए काम करने के लिए प्रकट होता है रखने के लिए। सुधार प्रदान करने के लिए स्वतंत्र महसूस करें। (यह 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> 

Answer 4

इनमें से कुछ उत्तर मैं जो खोज रहा था वह बिल्कुल नहीं था। मेरे सीएसएस में यह बिट मेरी जरूरतों के लिए काम करता प्रतीत होता है।

input, 
select, 
textarea{ 
    display:inline-block !important; 
}