我需要一些帮助与这个响应式导航。
我想要的是一个水平菜单，包括一些填充和居中位置。但我得到的只是一个垂直菜单。
当菜单显示在手机/小屏幕设备上时，它显示为我想要的。但不是在桌面上。
/*DESKTOP - Version (inside media-query)*/
ul.menu{
display: inline;
width: 100%;
background: #FFF;
text-align: center;
}
ul.menu li{
display: inline;
font-size: 22px;
border-bottom: 1px solid #80b4e0;
}
ul.menu li a:first-child{
padding-top: 20px;
}ul.menu li a:last-child{
padding-bottom: 20px;
}
ul.menu li:hover{
background: #80b4e0;
color: #FFF;
}
ul.menu li a{
display: inline-block;
color: #80b4e0;
padding: 20px 0;
}
ul.menu a:hover{
color: #FFF;
}
/*Mobile version - mobile first*/
ul.menu{
display: none;
width: 100%;
background: #FFF;
text-align: center;
}
ul.menu li{
font-size: 22px;
border-bottom: 1px solid #80b4e0;
}
ul.menu li a:first-child{
padding-top: 20px;
}ul.menu li a:last-child{
padding-bottom: 20px;
}
ul.menu li:hover{
background: #80b4e0;
color: #FFF;
}
ul.menu li a{
display: block;
color: #80b4e0;
width: 100%;
padding: 20px 0;
}
ul.menu a:hover{
color: #FFF;
}
这修复了大部分问题
@media only screen and (min-width: 770px)
ul.menu {
text-align: center;
}
ul.menu li {
display: inline-block;
font-size: 22px;
border-bottom: 1px solid #80b4e0;
}
}
@media only screen and (min-width: 770px) {
ul.menu {
text-align: center;
}
ul.menu li {
display: inline-block;
font-size: 22px;
border-bottom: 1px solid #80b4e0;
}
ul.menu li a:first-child {
padding-top: 20px;
}
ul.menu li a:last-child {
padding-bottom: 20px;
}
ul.menu li:hover {
background: #80b4e0;
color: #FFF;
}
ul.menu li a {
display: block;
color: #80b4e0;
padding: 20px 0;
}
ul.menu a:hover {
color: #FFF;
}
}
/*Mobile version - mobile first*/
ul.menu {
background: #FFF;
text-align: center;
}
ul.menu li {
font-size: 22px;
border-bottom: 1px solid #80b4e0;
}
ul.menu li a:first-child {
padding-top: 20px;
}
ul.menu li a:last-child {
padding-bottom: 20px;
}
ul.menu li:hover {
background: #80b4e0;
color: #FFF;
}
ul.menu li a {
display: block;
color: #80b4e0;
width: 100%;
padding: 20px 0;
}
ul.menu a:hover {
color: #FFF;
}<ul id="menu-start" class="menu">
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-21"><a href="http://oneconsultant.se/ninas/">START</a>
</li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://oneconsultant.se/ninas/om-hundsalongen/">OM HUNDSALONGEN</a>
</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://oneconsultant.se/ninas/boka-tid/">BOKA TID</a>
</li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://oneconsultant.se/ninas/aktuellt/">AKTUELLT</a>
</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://oneconsultant.se/ninas/kontakta-oss/">KONTAKTA OSS</a>
</li>
</ul>JSfiddle演示/strong>
修改CSS代码
/*Mobile version - mobile first*/
ul.menu{
width: 100%;
background: #FFF;
text-align: center;
}
ul.menu li{
font-size: 22px;
border-bottom: 1px solid #80b4e0;
display:inline-block;
}
ul.menu li a:first-child{
padding-top: 20px;
}ul.menu li a:last-child{
padding-bottom: 20px;
}
ul.menu li:hover{
background: #80b4e0;
color: #FFF;
}
ul.menu li a{
display: block;
color: #80b4e0;
padding: 20px 10px;
text-decoration:none;
}
ul.menu a:hover{
color: #FFF;
}
@media (max-width: 768px){
ul.menu{
display: inline-block;
width: 100%;
background: #FFF;
text-align: center;
}
ul.menu li{
display: inline-block;
width:100%;
font-size: 22px;
border-bottom: 1px solid #80b4e0;
}
ul.menu li a:first-child{
padding-top: 20px;
}ul.menu li a:last-child{
padding-bottom: 20px;
}
ul.menu li:hover{
background: #80b4e0;
color: #FFF;
}
ul.menu li a{
display: inline-block;
color: #80b4e0;
padding: 20px 0;
}
ul.menu a:hover{
color: #FFF;
}
}
演示——https://jsfiddle.net/ft18c24u/5/