[英]CSS Sidebar Menu Overflow
当我为侧面导航栏添加文本时,文本将溢出到下一行,而不是继续在同一行上。 例如,我希望 CRF 注释和 CRI 注释不会像当前那样溢出。 我不确定我错过了什么。 我尝试将显示更改为内联块,但没有奏效。 我在 CSS 页面中弄乱了某些宽度。 我确定我只是忽略了某些东西,但无法弄清楚。
这是导航菜单的 html
<div class="w3-sidebar w3-bar-block w3-card w3-animate-left" style="display:none" id="mySidebar">
<button class="close_button"
onclick="w3_close()">Close</button><br />
<a href="default.aspx" class="w3-bar-item w3-button">Home</a> <br />
<a href="application.aspx"class="w3-bar-item w3-button">Application</a><br />
<a href="vehicle.aspx"class="w3-bar-item w3-button">Vehicle</a><br />
<a href="AddOn.aspx" class="w3-bar-item w3-button">NADA</a><br />
<a href="visa.aspx"class="w3-bar-item w3-button">Visa</a><br />
<a href="AppNotes.aspx" class="w3-bar-item w3-button">CRF Notes</a><br />
<a href="CritNotes.aspx" class="w3-bar-item w3-button">CRI Notes</a><br />
</div>
<div id="main">
<div class="w3-teal">
<button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="w3_open()">Navigation</button>
<div class="w3-container">
</div>
</div>
</div>
</nav>
这是打开和关闭按钮的脚本
<script>
function w3_open() {
document.getElementById("main").style.marginLeft = "5%";
document.getElementById("mySidebar").style.width = "5%";
document.getElementById("mySidebar").style.display = "block";
document.getElementById("openNav").style.display = "none";
}
function w3_close() {
document.getElementById("main").style.marginLeft = "0%";
document.getElementById("mySidebar").style.display = "none";
document.getElementById("openNav").style.display = "inline-block";
}
</script>
这是我的 css
body{
font-family: Verdana, Arial, sans-serif;
background-color: #eff6ee;
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:0px;
margin-bottom:00px;
margin-left:0px;
margin-right:0px;
}
#wrapper {
background-color: white;
width: auto;
height:100%;
overflow:hidden;
margin-left: 36px;
}
nav {
float: left;
width: 80px;
padding-top:50px;
padding-right:55px;
background-color:#2e3532;
height:100%;
}
#rightcol {
margin-left: 100px;
background-color: #eff6ee;
color: #000000;
height:100%;
}
header {
background-color: #9197ae;
font-size: 100%;
padding-left: 30px;
padding-bottom:5px;
padding-top:3px;
}
h1{
padding-top:10px;
text-shadow: -2px 0 #f00,0 2px #f00, 2px 0 #f00, 0 -2px #f00;
color:#eff6ee;
margin-left:135px
}
h2 {
color: #869dc7;
font-family: arial, sans-serif;
}
main {
display:flex;
padding: 20px 20px 20px;
}
#floatright {
margin: 10px;
float: right;
}
nav a {
margin: 30px;
color:#9197ae;
}
nav a:visited{
color:mediumpurple;
}
nav a:hover{
color:white;
text-decoration:underline;
}
.close_button{
width:125px;
text-align:center
}
#openNav{
width:125px;
text-align:center
}
.logo{
padding-left:10px;
padding-right:10px
}
.ssninput{
background-color:#eff6ee;
padding-left:10px
}
.table{
padding-left:10px
}
在w3_open() function 中, document.getElementById("mySidebar").style.width不应为5% 。 它应该超过15% (这个值将取决于其他 css styles。无论如何你应该增加那个宽度)。
body { font-family: Verdana, Arial, sans-serif; background-color: #eff6ee; display: block; position: absolute; height: auto; bottom: 0; top: 0; left: 0; right: 0; margin-top: 0px; margin-bottom: 00px; margin-left: 0px; margin-right: 0px; } #wrapper { background-color: white; width: auto; height: 100%; overflow: hidden; margin-left: 36px; } nav { float: left; width: 80px; padding-top: 50px; padding-right: 55px; background-color: #2e3532; height: 100%; } #rightcol { margin-left: 100px; background-color: #eff6ee; color: #000000; height: 100%; } header { background-color: #9197ae; font-size: 100%; padding-left: 30px; padding-bottom: 5px; padding-top: 3px; } h1 { padding-top: 10px; text-shadow: -2px 0 #f00, 0 2px #f00, 2px 0 #f00, 0 -2px #f00; color: #eff6ee; margin-left: 135px } h2 { color: #869dc7; font-family: arial, sans-serif; } main { display: flex; padding: 20px 20px 20px; } #floatright { margin: 10px; float: right; } nav a { margin: 30px; color: #9197ae; } nav a:visited { color: mediumpurple; } nav a:hover { color: white; text-decoration: underline; }.close_button { width: 125px; text-align: center } #openNav { width: 125px; text-align: center }.logo { padding-left: 10px; padding-right: 10px }.ssninput { background-color: #eff6ee; padding-left: 10px }.table { padding-left: 10px }
<div class="w3-sidebar w3-bar-block w3-card w3-animate-left" style="display:none" id="mySidebar"> <button class="close_button" onclick="w3_close()">Close </button> <br/> <a href="default.aspx" class="w3-bar-item w3-button">Home</a> <br/> <a href="application.aspx" class="w3-bar-item w3-button">Application</a><br/> <a href="vehicle.aspx" class="w3-bar-item w3-button">Vehicle</a><br/> <a href="AddOn.aspx" class="w3-bar-item w3-button">NADA</a><br/> <a href="visa.aspx" class="w3-bar-item w3-button">Visa</a><br/> <a href="AppNotes.aspx" class="w3-bar-item w3-button">CRF Notes</a><br/> <a href="CritNotes.aspx" class="w3-bar-item w3-button">CRI Notes</a><br/> </div> <div id="main"> <div class="w3-teal"> <button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="w3_open()">Navigation</button> <div class="w3-container"> </div> </div> </div> </nav> <script> function w3_open() { document.getElementById("main").style.marginLeft = "5%"; document.getElementById("mySidebar").style.width = "15%"; // I updated this one document.getElementById("mySidebar").style.display = "block"; document.getElementById("openNav").style.display = "none"; } function w3_close() { document.getElementById("main").style.marginLeft = "0%"; document.getElementById("mySidebar").style.display = "none"; document.getElementById("openNav").style.display = "inline-block"; } </script>
您正在为缩小它的 nav 元素提供填充权,并且还通过 js 将 div 宽度设置为 5%,这应该是 100%。
希望这个小提琴可以帮助你。
nav {
float: left;
width: 150px;
padding-top:50px;
/*padding-right:55px;*/
background-color:#2e3532;
height:100%;
}
function w3_open() {
document.getElementById("main").style.marginLeft = "5%";
//document.getElementById("mySidebar").style.width = "5%";
document.getElementById("mySidebar").style.width = "100%";
document.getElementById("mySidebar").style.display = "block";
document.getElementById("openNav").style.display = "none";
}
function w3_close() {
document.getElementById("main").style.marginLeft = "0%";
document.getElementById("mySidebar").style.display = "none";
document.getElementById("openNav").style.display = "inline-block";
}
我编辑了这个 function (更改内联块并删除宽度):
function w3_open() {
document.getElementById("main").style.marginLeft = "5%";
document.getElementById("mySidebar").style.display = "inline-block";
document.getElementById("openNav").style.display = "none";
}
是你想要的吗?
function w3_open() { document.getElementById("main").style.marginLeft = "5%"; document.getElementById("mySidebar").style.display = "inline-block"; document.getElementById("openNav").style.display = "none"; } function w3_close() { document.getElementById("main").style.marginLeft = "0%"; document.getElementById("mySidebar").style.display = "none"; document.getElementById("openNav").style.display = "inline-block"; }
body{ font-family: Verdana, Arial, sans-serif; background-color: #eff6ee; display:block; position:absolute; height:auto; bottom:0; top:0; left:0; right:0; margin-top:0px; margin-bottom:00px; margin-left:0px; margin-right:0px; } #wrapper { background-color: white; width: auto; height:100%; overflow:hidden; margin-left: 36px; } nav { float: left; width: 80px; padding-top:50px; padding-right:55px; background-color:#2e3532; height:100%; } #rightcol { margin-left: 100px; background-color: #eff6ee; color: #000000; height:100%; } header { background-color: #9197ae; font-size: 100%; padding-left: 30px; padding-bottom:5px; padding-top:3px; } h1{ padding-top:10px; text-shadow: -2px 0 #f00,0 2px #f00, 2px 0 #f00, 0 -2px #f00; color:#eff6ee; margin-left:135px } h2 { color: #869dc7; font-family: arial, sans-serif; } main { display:flex; padding: 20px 20px 20px; } #floatright { margin: 10px; float: right; } nav a { margin: 30px; color:#9197ae; } nav a:visited{ color:mediumpurple; } nav a:hover{ color:white; text-decoration:underline; }.close_button{ width:125px; text-align:center } #openNav{ width:125px; text-align:center }.logo{ padding-left:10px; padding-right:10px }.ssninput{ background-color:#eff6ee; padding-left:10px }.table{ padding-left:10px }
<.DOCTYPE html> <html lang="en"> <head> <link href="CSS/StyleSheet1:css" rel="stylesheet" /> <title>Home</title> <meta charset="utf-8"> </head> <body> <nav> <div class="w3-sidebar w3-bar-block w3-card w3-animate-left" style="display.none" id="mySidebar"> <button class="close_button" onclick="w3_close()">Close</button><br /> <a href="default.aspx" class="w3-bar-item w3-button">Home</a> <br /> <a href="application.aspx"class="w3-bar-item w3-button">Application</a><br /> <a href="vehicle.aspx"class="w3-bar-item w3-button">Vehicle</a><br /> <a href="AddOn.aspx" class="w3-bar-item w3-button">NADA</a><br /> <a href="visa.aspx"class="w3-bar-item w3-button">Visa</a><br /> <a href="AppNotes.aspx" class="w3-bar-item w3-button">CRF Notes</a><br /> <a href="CritNotes.aspx" class="w3-bar-item w3-button">CRI Notes</a><br /> </div> <div id="main"> <div class="w3-teal"> <button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="w3_open()">Navigation</button> <div class="w3-container"> </div> </div> </div> </nav> <form id="form1" runat="server"> <div id="wrapper"> <div id="rightcol"> <header> <img src="Images/GCSCU_Color:gif" height."90" width="120" align="left" class="logo"/><h1>CRIF Access</h1> </header> <main> <h5>To begin click on the navigation button on the side.<br /> <br /> There you will see a menu with different purposes. The first is the home page. Click on that to get back to this page.<br /> Second is the application page. Here you will enter the member's AppID and it will bring back details in relation to the original CRIF application.<br /> The third option is the vehicle page. Enter the vehicle's VIN number and it will bring back details about the vehicle on the loan.<br /> The forth option will bring back information about a Visa that was opened up via CRIF when you submit the AppID.<br /> The last page is a summary page that is currently still being worked on, This page can give you overall summary data about loan numbers from certain branches,<br /> during specific times of a selected year. from a certain dealer..etc. </h5> </main> </div> </div> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.