请参阅jsFiddle

Question

我构建了一个菜单但由于某种原因，当浏览器重新调整大小时，菜单的左侧会下降，当发生这种情况时，底部边框会消失。有没有办法阻止这种情况发生，只有整个菜单比例，直到达到一定的大小？

继承我的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>

非常感谢任何帮助！

Answer 1

好的，所以我看到了你的设计，并且无法破译你在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;
}

从转移停止菜单

1 个答案:

请参阅jsFiddle

HTML

CSS