停止切換菜單

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 個解決方案

解決方案1
0 已采納 2014-02-18 04:07:08

見jsFiddle

的HTML

的CSS

停止切換菜單

問題描述

1 個解決方案

解決方案1 0 已采納 2014-02-18 04:07:08

見jsFiddle

的HTML

的CSS

解決方案1
0 已采納 2014-02-18 04:07:08