Question

我需要一些有关此响应式导航的帮助。

我想要的是一个水平菜单，包括一些填充和居中位置。但我所得到的只是一个垂直菜单。

当菜单显示在移动/较小的屏幕设备上时，它会显示出我想要的内容。但不是在桌面上。

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

开始 OM HUNDSALONGEN BOKA TID AKTUELLT KONTAKTA OSS

Answer 1

这解决了大部分问题

GridView

＆＃13;

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

＆＃13;

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

＆＃13;

JSfiddle Demo

Answer 2

更改您的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/

这个CSS /水平响应式菜单有什么问题

2 个答案: