對齊窗體右側的控件

我使用asp.net mvc和kendo構建數據輸入窗體。我想在右邊有一些控件。目前如果您看到它們在左側對齊。我想一些在右側以及對齊窗體右側的控件

我如何做到這一點。這裏是低於

<div id="addEdit" style="width 100%; height 100%; background-color #fff;"> 
    <div class="demo-section k-content"> 
     <ul class="fieldlist"> 
      <li> 
       <label for="simple-input">Employee Number</label> 
       <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" /> 
      </li> 
      <li> 
       <label for="simple-input">ForeName</label> 
       <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" /> 
      </li> 
      <li> 
       <label for="simple-input">ForeName</label> 
       <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" /> 
      </li> 
      <li> 
       <label for="simple-input">Surname</label> 
       <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" /> 
      </li> 
      <li> 
       <label for="simple-input">Preferred Name</label> 
       <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" /> 
      </li> 
      <li> 
       <label for="simple-input">Language</label> 
       <input id="language" style="width: 40%;" /> 
      </li> 
      <li> 
       <label for="simple-input">Country</label> 
       <input id="country" style="width: 40%;" /> 
      </li> 
      <li> 
       <label for="simple-input">Preferred Name</label> 
       <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" /> 
      </li> 



      <li> 

       <button class="k-button">Cancel</button>&nbsp; 
       <button class="k-button k-primary">Save</button> 
      </li> 

     </ul> 
     <style> 
      .fieldlist { 
       margin: 0 0 -2em; 
       padding: 0; 
      } 

       .fieldlist li { 
        list-style: none; 
        padding-bottom: 2em; 
       } 

       .fieldlist label { 
        display: block; 
        padding-bottom: 1em; 
        font-weight: bold; 
        text-transform: uppercase; 
        font-size: 10px; 
        color: #444; 
       } 
     </style> 
    </div>

來源

2017-03-07 Tom

代碼可以拆分DIV至極包含表單，並添加「浮動：左」和「浮動：權利」的新的問題。

<div style="float:left; width:40%"> 
    //what u want here 
</div> 
<div style="float:right; width:40%"> 
    //what u want here 
</div>

編輯：

<div id="addEdit" style="width 100%; height 100%; background-color #fff;"> 
<div class="demo-section k-content"> 
    <div style="float:left; width:40%"> 
     <ul class="fieldlist"> 
      <li> 
       <label for="simple-input">Employee Number</label> 
       <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" /> 
      </li> 
      // the content you want here  
     </ul> 
    </div> 
    <div style="float:right; width:40%"> 
     <ul class="fieldlist">  
      <li> 
       <label for="simple-input">Country</label> 
       <input id="country" style="width: 40%;" /> 
      </li> 
      // the content you want here 
     </ul> 
    </div> 
</div>

來源

2017-03-07 18:30:57 Jorlink

所以你的意思是我需要UL元素和每個你提到的div。你能否給我舉一個與我的代碼相關的例子，因爲每個元素都使用類 – Tom

嘗試像我在編輯時那樣做。 – Jorlink

可以使事情右側不同的方式。簡單就是：

系統1：

給你希望出現在右側該列表的類名，然後只需你可以做到這一點CLASS_NAME = right_aligned_part，

.fieldlist li .right_aligned_part{ 
    text-align: right; 
}

如果你申請的清單，那麼它會去所有的清單

.fieldlist li{ 
    text-align: right; 
}

然後，對於輸入fi視場在右邊開始的文字，只需添加相同的代碼

input#simple-input { 
    text-align: right; 
}

系統2：

您可以使用float：正確的做出正確的任何股利或東西

.fieldlist li .right_aligned_part{ 
    float: right; 
}

或者，使用左邊的東西float:left

.fieldlist li .rightleft_aligned_part{ 
    float: left; 
}

然後只需添加

clear: both

課後div，你可以得到一個很好的結果，我認爲。

來源

2017-03-07 21:00:43

對齊窗體右側的控件

回答

相關問題