html - 对齐窗体右侧的控件

Question

我正在使用 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>

Answer 1

您可以拆分包含表单的 div，并将“float:left”和“float:right”添加到新的。

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