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 菜单呈现为<UL> 元素。后者默认具有块显示，这意味着它占据了所有可用空间。您可以将显示覆盖为“inline-block”，然后菜单应根据需要调整大小：

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

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