我构建了一个菜单，但由于某种原因，当浏览器重新调整大小时，菜单的左侧会掉落，并且当这种情况发生时，底部边框会消失。有什么办法可以阻止这种情况发生，让整个菜单缩放直到达到一定大小？
这是我的 CSS:
@charset "utf-8";
/* Main CSS Document */
#parent{
padding: 0px, auto;
width: 50%;
min-width:50%;
height: 50px;
margin-top:3%;
margin-left: 25%;
margin-right: 15%;
background: #FFF;
border-bottom:thin groove #000;
}
#child-left{
float: left;
padding-left:25px;
width: 35%;
min-width:35%;
height: 50px;
background: #FFF;
}
#child-right{
padding-top: 15px;
padding-right:20px;
float: right;
width: 60%;
min-width:60%;
height: 35px;
background: #FFF;
}
#logoparent{
padding: 0px, auto;
width: 100%;
height: 50px;
margin-left: 15%;
margin-right: 15%;
background: #FFF;
}
#menu{
float:right;
padding-right:7%;
font-family:"Courier New", Courier, monospace;
font-size:18px;
font-weight:600;
color:#666666;
}
#menuend {
padding-right:10px;
float:right;
font-family:"Courier New", Courier, monospace;
font-size:18px;
font-weight:600;
color:#666666;
}
#menu:hover{
color:#C30;
}
这是 HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mainstylesheet.css" />
<title>Home</title>
</head>
<body>
<div id="parent">
<div id="child-left"><img name="Logo" src="" width="100%" height="100%" alt="" /></div>
<div id="child-right">
<div id="menupad">
<div id="menuend"> Contact </div>
<div id="menu"> Gallery </div>
<div id="menu"> About </div>
<div id="menu"> Home </div>
</div>
</div>
</div>
</body>
</html>
非常感谢任何帮助!
最佳答案
好的，所以我看到了您的设计，但无法破译您在 css 中使用的所有百分比(我的错误)，所以我从头开始并尝试匹配您的设计。我希望你能调整它以适应你的链接。在这里:
参见jsFiddle
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mainstylesheet.css" />
<title>Home</title>
</head>
<body>
<div id="parent">
<div id="child-left">
<img name="Logo" src="" width="200px" height="50px" alt="" />
</div>
<div id="child-right">
<div id="menupad">
<div id="menuend"> Contact </div>
<div id="menu"> Gallery </div>
<div id="menu"> About </div>
<div id="menu"> Home </div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* Main CSS Document */
#parent{
max-width: 900px;
margin: 0 auto;
border-bottom:thin groove #000;
}
#child-left{
float: left;
height: 50px;
}
#child-right{
float: right;
height: 50px;
line-height: 80px;
vertical-align: bottom;
}
#logoparent{
height: 50px;
}
#menu{
float:right;
font-family:"Courier New", Courier, monospace;
margin-left: 10px;
}
#menuend {
float:right;
font-family:"Courier New", Courier, monospace;
margin-left: 10px;
}
.clear{
clear: both;
}
关于html - 停止菜单移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21843764/