Question

我添加了一个verboser-than-the-rest子菜单项，以便截断它的结尾：

如您所见，“客户类别维护”子菜单项被截断。我想增加子菜单区域的宽度，以便它显示完整。怎么样？

出现的表格的宽度值为“100％”：

<div id="UtilityMenu" style="display:none">
<table bgcolor="#dddddd" align="left" valign="top" height="100%" width="100%" cellpadding="2" cellspacing="0" 
border="0" style="cursor:hand" style="border: 1pt ridge #000000">

新的子菜单项是：

    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/custmaint_categoryadmin.aspx');"><b>Customer Category Maintenance</b></font></td></tr>

我希望“width = 100％”意味着该区域将根据需要扩展以容纳子菜单项的所有文本，但显然并非如此。那么，我该怎么做才能增加宽度？我是否需要添加硬编码像素宽度，并尝试使用它直到它足够宽，或者是否有更优雅的方式？

以下是更多的html，如果需要（在上下文中）：

<div id="UtilityMenu" style="display:none">
<table bgcolor="#dddddd" align="left" valign="top" height="100%" width="100%" cellpadding="2" cellspacing="0" 
border="0" style="cursor:hand" style="border: 1pt ridge #000000">
<tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" 
onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun
('pages/orderget.aspx');"><b>Get Orders</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" 
style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/treeview.aspx?');"><b>Doc. Repository</b></font></td></tr>
<%If LCase(Trim(Session("SecurityGroup"))) = "admin" Or LCase(Trim(Session("SecurityGroup"))) = "cpsadmin" 
Then%>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" 
style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/usermaint.aspx');"><b>User Security</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" 
style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/unitmaint.aspx');"><b>Unit Maintenance</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" 
style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/membmaint.aspx');"><b>Member Maintenance</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" 
style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/custmaint.aspx');"><b>Customer Maintenance</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" 
style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" 
onclick="parent.MenuRun('pages/custmaint_categoryadmin.aspx');"><b>Customer Category 
Maintenance</b></font></td></tr>
<%End If%>

更新

我非常确定答案是可行的，我继续并将其标记为正确并授予赏金;但是，它对我不起作用。

我将此CSS添加到页面中：

<head>
. . .
<title>Main Menu</title>

<style>
#UtilityMenu {
    width: auto;
    white-space: nowrap;
}
</style>
</head>

这是UtilityMenu及其子女的相关部分：

<div id="UtilityMenu" style="display:none" >
<table bgcolor="#dddddd" align="left" valign="top" height="100%" width="100%" cellpadding="2" cellspacing="0" border="0" style="cursor:hand" style="border: 1pt ridge #000000">
<tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/orderget.aspx');"><b>Get Orders</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/treeview.aspx?');"><b>Doc. Repository</b></font></td></tr>
<%If LCase(Trim(Session("SecurityGroup"))) = "admin" Or LCase(Trim(Session("SecurityGroup"))) = "cpsadmin" Then%>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/usermaint.aspx');"><b>User Security</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/unitmaint.aspx');"><b>Unit Maintenance</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/membmaint.aspx');"><b>Member Maintenance</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/custmaint.aspx');"><b>Customer Maintenance</b></font></td></tr>
    <tr><td nowrap align="left" valign="top"><font color="#0000ff" style="font: 8pt arial" style="cursor:hand" onmouseover="this.color='#ff0000';" onmouseout="this.color='#0000ff';" onclick="parent.MenuRun('pages/custmaint_categoryadmin.aspx');"><b>Customer Category Maintenance</b></font></td></tr>
<%End If%>
<tr><td height="100%"></td></tr>
</table>
</div>

我实际上尝试将值直接添加到UtilityMenu然后再添加到表中，但它们也没有任何区别。我第一次尝试：

<div id="UtilityMenu" style="display:none" width="auto" white-space: nowrap >

...然后这个：

<table bgcolor="#dddddd" align="left" valign="top" height="100%" width="auto" white-space: nowrap cellpadding="2" cellspacing="0" border="0" style="cursor:hand" style="border: 1pt ridge #000000">

......但这些都没有什么区别。

Answer 1

如果您设置#UtilityMenu div width: auto，则表格宽度会根据其父级自动增加。您可以使用以下CSS：

#UtilityMenu {
    width: auto;
    white-space: nowrap;
}

如何加宽特定顶级菜单项的子菜单项区域？

更新

1 个答案: