html - 菜单栏在放大/缩小时无法正确显示

标签 html css

我有一个包含 6 个元素的菜单栏:

enter image description here

enter image description here

当我放大/缩小时,布局发生变化:

为什么会这样?

CSS:

.menubar {
float:left;
width:920px;    
background:url(../images/nav-back.png) top left repeat-x;
height:52px;
    padding:9px 10px 8px 10px;
    margin-bottom:32px;
 }
.menubar ul {
   float:left;
   background:url(../images/nav-bg.gif) top left repeat-x;
   width:100%;
   display: block; 
}
.menubar li { float:left; background:url(../images/depth.gif) top right no-repeat;   }
.menubar li.last { background:none;  }
.menubar li.first a { padding:16px 42px 16px 43px; }
.menubar li.last a { padding: 16px 43px 16px 44px; }
.menubar li a { padding:16px 18px; display: block; }

最佳答案

这是因为代码的一部分是百分比,另一部分是固定大小。但是由于您的问题中没有代码,我不能说如何改进它。

关于html - 菜单栏在放大/缩小时无法正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12314969/

相关文章:

html - 在 CSS 中选择内部 HTML 元素

javascript - 如何向我制作的这个 jquery div carosel 添加页面指示器?

html - iframe 滚动条在 Mac 上的 Chrome 中消失

html - 如何制作上下垂直线

html - 没有滚动条的 100% 高度(带有 flexbox 的父项和嵌套子项)

html - 如何使下拉菜单超出父列的宽度?

html - Chrome 复制文本尽管使用 "-webkit-user-select: none"

html - 如何制作自定义形状的 div,或操作 div

css - Twitter Bootstrap 3.0.3 Navbar 对齐 Navbar Header

javascript - 获取所有的 <style> 标签并将内容拼接成一个 <style> 标签