需要增加菜单栏的宽度

Posted 2023-02-16

【中文标题】需要增加菜单栏的宽度

【英文标题】：Need to increase width of menu bar

【发布时间】：2016-06-23 06:53:40

【问题描述】：

我是编码新手。我使用现成的 html 模板创建了一个网站 (ribbstech.com)，并从一些菜单栏生成的脚本中插入了一个不同的菜单栏。该脚本生成了一个 384 像素宽度的菜单栏，但我想让它与标题宽度一样长，即 890 像素。

我尝试在 CSS 中进行更改，但无法让它变长。所以请提出确切的更改，使其宽度为 890 像素。

提前致谢

【问题讨论】：

粘贴您的 html 和 css 以便我们能够帮助您解决问题 :)

是的，请粘贴您的代码或 jsfiddle 链接，以便我们为您提供解决方案

不显示您的代码..我们能提供什么帮助..？

【参考方案1】：

给你的ul

ul width: 950px;
    background: #c1c1c1;

并删除浮动列表并添加此样式：

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

【参考方案2】：

转到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;

【参考方案3】：

用于将您的 width 设置为 890 像素

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

如果你想把所有这些菜单放在中心

试试这个

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

【参考方案4】：

您是否已经尝试过这种方式？

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

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

【参考方案5】：

转到 Style.css 将宽度应用于：ul#css3menu1width: 890px; 应用宽度：ul#css3menu1 liwidth:20% // 因为我们有 5 个菜单和 100% 的宽度/5 = 20%

您的菜单将如下所示：见截图

【参考方案6】：

在 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;

就是这样！