个人中心
gpt4 book ai didi

html - 菜单栏布局解决方案

转载 作者：行者123 更新时间：2023-11-28 02:07:12 25 4
gpt4 key购买 nike

我在创建正确的菜单栏布局时遇到了一些问题。

我的菜单栏分为三个部分:

左(标志)，中(菜单)，右(登录信息)

还有两个不同的菜单，一个是管理员菜单(几个额外的按钮 - 宽度为 701px)和普通用户菜单(宽度为 447px)。

整个菜单栏宽度设置为 100%。

现在我需要帮助的是为每个部分设置宽度属性。

如果我将固定宽度 (px) 设置为中心(菜单)部分，我无法计算出其他两个部分的正确宽度百分比。由于屏幕分辨率较小(菜单保持较宽)，我也无法为其他部分设置固定宽度值。

如果我将百分比宽度设置为中心(菜单)部分，菜单可能会在较小的屏幕分辨率下中断。

那么最好的解决方案是什么？

HTML:

<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>

CSS:

#main {
    width:100%;
    height:77px;
    background-color:#373737;
    }

    #left, 
    #center,     
    #right {
        height:77px;
        }

    #left {
        float:left;
        } /* width? % or px*/

    #center {
        display:inline-block;
        } /* width? % or px*/

    #right {
        float:right;
        } /* width? % or px*/

管理菜单栏: enter image description here

普通用户菜单栏: enter image description here

最佳答案

你可以尝试这个 CSS 并调整每个宽度，如果你希望以百分比形式总计到主 div 的 100%:

#main {

    width:100%;
    height:77px;
    background-color:#373737;
    padding:5px;
}

#left, #center, #right {height:77px;}

#left {float:left;background-color:black;width:25%}  /*width? % or px*/
 #center {display:inline-block;background-color:blue;width:50%; float:left}/* width? % or px*/
#right {float:left;background-color:yellow;width:25%}  /*width? % or px*/​

关于html - 菜单栏布局解决方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10738251/

25 4 0
文章推荐： jquery - 如何自动右/左浮动
文章推荐： html - 是否可以在 HTML Textarea 中保留链接？
文章推荐： javascript - 如何将变量从 JSON 传递到原始 Javascript？
文章推荐： javascript - 缺少 XML 节点