Question

我正在尝试使用Telerik MVC Menu控件（作为按钮栏），但似乎无法将宽度设置为自动生成。我的意思是，菜单一直持续到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>元素。后者默认具有块显示，这意味着它占用了所有可用空间。您可以将显示覆盖为“内联块”，然后根据需要调整菜单大小：

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

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

Telerik MVC菜单控制 - 自动宽度

1 个答案: