javascript - 垂直到水平导航

我将导航栏下面的这个从垂直转换为水平时遇到问题。

http://codepen.io/anon/pen/bdpRjx

谁能帮助我看看我的代码。这是我的CSS，但是效果和大小都很混乱。

*{
box-sizing: border-box;
}
body{
height:100%;
background-color: #444;
}
h1{
font-size:1em;
text-align:center;
color: #eee;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.nav-container{
width:100%;
margin-top:10px;
box-shadow: 0 2px 2px 2px black;
transition: all 0.3s linear;
}
.nav{
list-style-type:none;
margin:0;
padding:0;
}
li{
height:50px;
width: 300px;
position:relative;
background: linear-gradient(#292929, #242424);
display: inline;
}
ul{
float:left;
width: 100%;
}
a {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
text-decoration:none;
display:inline;
height:100%;
width:300px;
line-height:50px;
color:#bbb;
text-transform: uppercase;
font-weight: bold;
border-left:5px solid transparent;
letter-spacing:1px;
transition: all 0.3s linear;
}
.active a{
color: #B93632;
border-left:5px solid #B93632;
background-color: #1B1B1B;
outline:0;
width: 200px;
}
li:not(.active):hover a{
color: #eee;
border-left: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^= "icon"]{
position:absolute;
left:20px;
font-size: 1.5em;
transition: all 0.3s linear;
}

非常感谢您的任何建议。
问候
瑞安

最佳答案

如果这绝对不是您的意思，请事先道歉，但我想基本上您想做的就是将列表项显示设置为inline-block。像这样：

.nav-container li {
    box-shadow: 0 2px 2px 2px black;
    display: inline-block;
    width: 300px;
}

您需要从.nav-container中删除框阴影和宽度，并将其放在此处。

如果您只是做这些，那么显然您会在小屏幕上看到很多问题，但这也许可以使您入门？