需要增加菜单栏的宽度

Question

我是编码的新手。我使用现成的HTML模板创建了一个网站（ribbstech.com），并从一些菜单栏生成的脚本中插入了一个不同的菜单栏。该脚本生成了一个384像素宽的菜单栏，但我希望只要标题宽度为890px即可。

我尝试过更改CSS，但无法做多久。所以请建议确切的更改，使其宽度为890px。

提前致谢

Answer 1

你有没有尝试过这种方式？

ul#css3menu1 {
    width: 890px;
    background-color: #c1c1c1;
}

如果您想添加更多菜单项，只需复制粘贴，适合它们的正确类就已适合。

Answer 2

给你的ul

ul {width: 950px;
    background: #c1c1c1;}

并删除float to list并添加此样式：

ul#css3menu1 li {display: inline-block;
                 white-space: nowrap;
                 font-size: 0;}

Answer 3

转到style.css line 30 in ul#css3menu1 a更改padding: 10px 60px;而不是padding:10px;

ul#css3menu1 a {
    display: block;
    vertical-align: middle;
    text-align: left;
    text-decoration: none;
    font: bold 14px Trebuchet MS;
    color: #000000;
    text-shadow: #FFF 0 0 1px;
    cursor: pointer;
    padding: 10px 60px;
    background-color: #c1c1c1;
    background-image: url("mainbk.png");
    background-repeat: repeat;
    background-position: 0 0;
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: #C0C0C0;
}

Answer 4

将width设置为890px

ul#css3menu1 {
    width: 890px;
    background: #c1c1c1;
}

然后，如果您希望将所有菜单放在中心

试试这个

ul#css3menu1 li {
    float: none !important;
    display: inline-block;
}

Answer 5

在Style.css上，第13行，将ul宽度更改为以下：

ul#css3menu1 {
display: inline-block;
font-size: 0;
padding: 0;
position: relative;
width: 71%; /*Match the width of parent container*/
z-index: 999;
}

接下来在第7行添加宽度到li：

ul#css3menu1 li {
display: block;
float: left;
font-size: 0;
position: relative;
white-space: nowrap;
width: 20%; /*this width*/
}

现在在第22行，将文本对齐中心添加到CSS：

ul#css3menu1 a {
text-align: center;
}

多数民众赞成！

Answer 6

获得Style.css 将宽度应用于：ul#css3menu1{width: 890px;} 应用宽度：到ul#css3menu1 li{width:20% } //因为我们有5个菜单和100％宽度/ 5 = 20％

您的菜单如下所示：查看屏幕截图