Telerik MVC 菜单控件 - 自动宽度

Question

我正在尝试使用 Telerik MVC 菜单控件（作为按钮栏），但似乎无法将宽度设置为自动生成。我的意思是，菜单一直持续到 DIV 的末尾。我希望菜单的宽度仅与按钮宽度的总和一样宽。实际上，Telerik 演示正在执行与我的菜单相同的操作：

http:// /demos.telerik.com/aspnet-mvc/razor/menu/sitemapbinding （看看菜单如何继续到“其他产品线”的右侧）。

这是我的菜单：

    @{ Html.Telerik().Menu()
            .Name("case-history-button-menu")
            .ClientEvents(events => events.OnSelect("onCaseHistoryMenuBarSelect"))
            .Items(menu =>
            {
                menu.Add()
                    .Text("Add a Response").HtmlAttributes(new { id = "cases-history-addresponse" } ); @*Sets the ID HTML attribute so we can access it *@
                menu.Add()
                    .Text("Add a Comment").HtmlAttributes(new { id = "cases-history-button-addcomment" }); ;
                menu.Add()
                    .Text("Back to Cases").HtmlAttributes(new { id = "cases-history-button-back" }); ;
            })
            .Render();
    }

我确实意识到我可以对宽度进行硬编码......但是当我添加或删除按钮（以编程方式）时，我希望调整菜单大小。

Answer 1

Telerik MVC 菜单呈现为

元素。后者默认具有块显示，这意味着它占据了所有可用空间。您可以将显示覆盖为“内联块”，然后菜单应根据需要调整大小：

   @{ Html.Telerik().Menu()
            .Name("case-history-button-menu")
            // set the display to inline-block
            .HtmlAttributes( new { style = "display: inline-block" } )
    }

请记住，旧版本的 IE 不接受内联块显示。如果您必须支持较旧的 IE，则可能需要“内联”。