Nhãn và hộp văn bản trên cùng một dòng bằng cách sử dụng css

Question

Khi tạo ứng dụng asp.net mvc3 mới, bạn nhận được đăng nhập và đăng ký biểu mẫu với nhãn trên trường văn bản. Tôi muốn thay đổi nó để cả hai nhãn và lĩnh vực đang trên cùng một dòng và liên kết

Sau đây không hoạt động

@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> 

CSS:

.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

tôi thường nổi của tôi nhãn bên trái và các dòng đầu vào bên cạnh nó. Dưới đây là một ví dụ: http://jsfiddle.net/qXFLa/

Dưới đây là một ví dụ về làm thế nào tôi muốn sắp xếp lại mã của bạn:

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

Sau đó, cho css của bạn:

.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

Tôi đang sử dụng css này

.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

Mặc dù tôi chưa thử câu trả lời được chấp nhận bởi kinakuta, nó yêu cầu bạn phải sắp xếp lại Visual St udio tạo ra xem; Tôi sẽ tiếp cận như sau, nếu bạn không muốn sắp xếp lại bố cục được tạo tự động., tức là để giữ định dạng

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

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

etc... 

CSS sau đây có vẻ phù hợp với tôi. Vui lòng cung cấp các cải tiến. (có vẻ rất giống với câu trả lời của 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

Một vài câu trả lời này không hoàn toàn là những gì tôi đang tìm kiếm. Điều này bit trong CSS của tôi dường như làm việc cho các nhu cầu của tôi.

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