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>

Answer 2

你可以用不同的方式做出正确的事情。简单的是：

系统1：

给出要在右侧显示的列表的类名，然后只需执行此操作class_name = right_aligned_part，

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

如果您申请列表，那么它将会在右侧列出所有列表

.fieldlist li{
    text-align: right;
}

然后，对于在右侧开始文本的输入字段，只需添加相同的代码

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

系统2：

您可以使用float：right来对任何div或其他东西做出正确的

.fieldlist li .right_aligned_part{
    float: right;
}

或者，使用float:left

在左边做一些事情

.fieldlist li .rightleft_aligned_part{
    float: left;
}

然后添加

clear: both

课后div，你可以得到一个好的结果。

对齐表单右侧的控件

2 个答案: