CSS侧边栏菜单溢出

Question

当我为侧面导航栏添加文本时，文本将溢出到下一行，而不是仅在同一行上继续。例如，我希望CRF Notes和CRI Notes不会像当前那样溢出。我不确定我缺少什么。我曾尝试将显示更改为嵌入式块，但这没有用。我在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
}

Answer 1

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>