Question

我正在创建一个类似于jsbin的网站，我创建了一个黑色的菜单栏，在菜单栏下方有一个灰色的代码容器，用户将键入一个代码我的问题是代码容器重叠菜单酒吧小不是100％我不想超过它所以我怎么解决这个问题

这是我的代码

HTML

<html>
<head>
<title>CodePlayer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="StyleSheets/CodePlayerStyleSheet.css">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<!--------------------MENUBAR---------------------------------->
<div id="menubar">
<div id="logo">CodePlayer</div>
<div id="btnrun"><button id="runbtn">Run</button></div>
<div id="menubar">
<ul id="menulist">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li style="border:none;width:15%">Output</li>
</ul>
</div>
</div>
<!-------------------------------------------------------->
<div class="emptydiv"></div>
<!------------------CODECONTAINER---------------------------------------->
<div class="codecontainer" id="htmlcontainer">
<textarea>Example</textarea>
</div>

</div>
<!--------------------------------------------------------------->
<script>
</script>
</body>
</html>

CSS

body{
    margin:0;
    padding:0;
}
#menubar{
    background-color: #000000;
    width:100%;
    height:50px;

}
#logo{
    font-family: 'Lobster', cursive;
    color:white;
    font-size:30px;
    padding:5px 0 0 15px;
    float:left;
}
#runbtn{
    float:right;
    font-size:15px;
    background-color:rgba(0,0,0,1.00);
    border:1px solid #FFFFFF;
    width:60px;
    height:20px;
    border-radius:10px;
    color:white;
    cursor:pointer;
    position:relative;
    top:8px;
}
#btnrun{
    padding: 12px 20px 0 0;
}
#menulist{
    list-style:none;
    margin:0 auto;
    border:1px solid #FFFFFF;
    width:296px;
    height:30px;    
    padding:0;
    position:relative;
    top:2px;
}
#menulist li{
    float:left;
    color:white;
    border-right:1px solid white;
    padding:5px 12px 7px 15px;
    cursor:pointer;
}
 li:hover{
     background-color:#FFFFFF;
     color:rgba(0,36,255,1.00) !important;
 }
.emptydiv{
    clear:both;
}
.codecontainer{
    background-color:rgba(177,177,177,1.00);
    color:black;
    float:left;
    height:100%;
    width:25%;
}

Answer 1

进行以下更改

#menubar {
    background-color: #000000;
    width:100%;
    height:auto;
    padding: 10px; /* you can change this, but it's to add some spacing on your menubar */
}

一个元素与另一个元素重叠

1 个答案: