Question

如何调整.TopMenuItem的宽度，而不是让它们拉伸到适合100％的窗口宽度？我将.TopMenuGroup宽度更改为100％，以便绿色背景拉伸总宽度。

这是我的CSS：

.TopMenuGroup
{
border: solid 0px #003167;
background-color: #005E20;
padding-bottom: 5px;
padding-top: 5px;
width: auto;
}

.MenuGroup 
{
border: solid 0px #003167;
background-color: #005E20;
color: #000000;
font-size: 11px;
}

.MenuGroup td {
color: #FFFFFF;
font-size: 11px;
}
.MenuGroupHover td {
color: #FFFFFF;
}
.MenuItemHover td {
color: #99FF33; 
}
td.MenuItemHover {
color: #99FF33;
font-size: 11px;
}

.TopMenuItem
{
color: #FFFFFF;
font-size: 12px;
font-weight: normal;
cursor: hand;
cursor: pointer;
font-family: helvetica, arial, sans-serif;
padding-left: 0px;
padding-right: 0px;
}

.TopMenuItemHover
{
color: #99FF33;
background-color: #005E20;
font-size: 12px;
font-weight: normal;
cursor: hand;
cursor: pointer;
font-family: helvetica, arial, sans-serif;
}

-- leaf menu items
.MenuItem
{
    background-color:#EEEEEE;
    color:#FFFFFF;
    font-size:11px;
    border: solid 0px white;
    cursor:hand;
    cursor:pointer;
    padding-top: 3px;
    padding-bottom: 3px;
}

.MenuItemHover
{
background-color: #005E20; 
color: #79FF00;
font-size: 11px;
border: solid 0px white;
cursor: hand;
cursor: pointer;
padding-top: 3px;
padding-bottom: 3px;
}

-- group menu items
.MenuItem td
{
  color:#FFFFFF;
  font-size:11px;
  border: solid 0px white;
  cursor:hand;
  cursor:pointer;
  padding-top: 3px;
  padding-bottom: 3px;
}

.MenuItemHover td
{
  background-color:#FEDF15;
  color:#000000;
  font-size:11px;
  border: solid 0px white;
  cursor:hand;
  cursor:pointer;
  padding-top: 3px;
  padding-bottom: 3px;
}

Answer 1

你应该为你的顶级菜单做一个水平列表，它更简单。

我为你做了这个：http://codepen.io/anon/pen/avlAc/

尝试仅使用表来显示行和列中的数据，而不是菜单;）

调整菜单项的宽度

1 个答案: