垂直于水平导航

Question

我将导航栏下方的这个从垂直转换为水平有问题。

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;
}

非常感谢您的任何建议。 问候 莱恩

Answer 1

如果这不是你的意思，请提前道歉，但我认为你想要做的就是将列表项显示设置为内联块。像这样：

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

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

如果你这么做的话，你很明显会在较小的屏幕上看到很多问题，但也许这会让你开始？