编辑器模板对齐两个组件

Question

我有一个使用 Telerik MVC 网格的网格编辑器模板，我在网格单元格中有两个 kendo ui 组件。我怎样才能让它们并排对齐。

我已经尝试了一些 css 并将它们放在 div 中并对齐浮动，但它们呈现在不同的范围内并且不确定如何将它们并排放置任何想法？

目前搜索按钮位于自动完成文本框下方。

@model object

@*@Html.Kendo().AutoComplete().Name("LocationSearch").Placeholder("Type in your search item . . ").Filter("startswith").BindTo(new string[] { "UK","USA","FR","ES","TR","RU","PT"}).Separator(",")*@

@(Html.Kendo().AutoComplete()
.Name("DepartmentSearch")
.Filter("startswith")
.Placeholder("Type in your search item")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetDepartments", "Home");

        })
        .ServerFiltering(false);

    })

)

@(Html.Kendo().Button()
    .Name("Search")
    .HtmlAttributes(new { type = "button", style="min-width:20px !important;"})
    .Content("...")
    )

Answer 1

自动完成小部件是在通过 jquery 添加内联宽度的跨度中创建的，并且有效。 $("#DepartmentSearch").first().css('width', '65%');

编辑器模板对齐两个组件

editor template align two components

kendo-ui

telerik

alignment

kendo-grid

telerik-grid