文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我想要在ul列表中有一个边框底部。

问我想要在ul列表中有一个边框底部。
EN

Stack Overflow用户
提问于 2021-06-03 21:32:15
回答 3查看 51关注 0票数 0

我正在处理576px的断点响应

我想要在第一张图片中没有任何边框底部的空间，并且我的两个元素占据了所有的宽度:menu li hover

但现在我拥有的是：my menu li - with space

有谁能帮帮我吗？

提前感谢！祝您今天愉快!

到目前为止，我的代码如下：

​

代码语言：javascript
复制
/*-------------------Header desktop size-------------------*/
.header {
    margin: auto;
    max-width: 1440px;
}

.header div {
    display: flex;
    justify-content: space-between;
    height: 100px;
    align-items: center;
    margin: auto;
}

.header img {
    margin: 10px 60px 0px 55px;
}

.menu {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    list-style-type: none;
    margin: 20px 80px 0 0;
    padding-right: 30px;
}

.menu ul {
    display: flex;
    list-style-type: none;
}

.menu-items {
    text-decoration: none;
    color: black;
    font-size: 18px;
}

.menu-items:hover {
    color: #0065fc;
}

.menu li {
    display: flex;
    margin-right: 60px;
    font-weight: normal;
    font-size: 18px;
}

/*-------------------Header mobile size-------------------*/

@media all and ( max-width: 576px) {

/*-- header --*/

    .menu {
        margin-right: 0px;
    }

    .menu nav {
        position: relative;
        flex-basis: 100%;
        order: 2;
        display: flex;
    }

    .menu ul {
        display: flex;
        flex-basis: 100%;
        order: 2;
        position: relative;
        top: 50px;
        right: 160px;
        padding-top: 30px;
        margin-top: 20px;
        margin-left: -30px;     
    }

    .menu-items {
        border-bottom: 3px solid #f2f2f2;
        padding-bottom: 10px;
        width: 250px;
    }

    .menu-items:hover {
        border-bottom-color: #0065FC;
    }

    .sign-up {
        position: absolute;
        padding-top: 0px;
        margin-top: 40px;
        margin-right: 0px;
        padding-left: 5px;
        color: #0065fc;
        text-decoration: none;
        width: 165px;
        transition: all 0.4s;
        right: 9px;
    }
   }
代码语言：javascript
复制
<header class="header">
  <div>
    <div><a href="#" class="header-logo"></a>
      <img src="images/logo/Reservia.svg" alt="Logo Reservia">
    </div>
                
     <nav class="menu">
       <ul>
          <li><a href="#search-lodging" class="menu-items" title="Hébergements">Hébergements</a></li>
          <li><a href="#search-activities" class="menu-items" title="Activités">Activités</a></li>
       </ul>
      
      <a href="#" class="sign-up" title="S'inscrire <strong>S'inscrire</strong></a>
       
     </nav>
  </div>

</header>

​

javascript
html
css
html-lists
EN

回答 3

Stack Overflow用户

发布于 2021-06-03 21:39:00

如果需要，只需将li空白处设置为0px或1px即可。

​

代码语言：javascript
复制
/*-------------------Header desktop size-------------------*/

.header {
  margin: auto;
  max-width: 1440px;
}

.header div {
  display: flex;
  justify-content: space-between;
  height: 100px;
  align-items: center;
  margin: auto;
}

.header img {
  margin: 10px 60px 0px 55px;
}

.menu {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  list-style-type: none;
  margin: 20px 80px 0 0;
  padding-right: 30px;
}

.menu ul {
  display: flex;
  list-style-type: none;
}

.menu-items {
  text-decoration: none;
  color: black;
  font-size: 18px;
}

.menu-items:hover {
  color: #0065fc;
}

.menu li {
  display: flex;
  margin-right: 60px;
  font-weight: normal;
  font-size: 18px;
}


/*-------------------Header mobile size-------------------*/

@media all and ( max-width: 576px) {
  /*-- header --*/
  .menu {
    margin-right: 0px;
  }
  .menu nav {
    position: relative;
    flex-basis: 100%;
    order: 2;
    display: flex;
  }
  .menu ul {
    display: flex;
    flex-basis: 100%;
    order: 2;
    position: relative;
    top: 50px;
    right: 160px;
    padding-top: 30px;
    margin-top: 20px;
    margin-left: -30px;
  }
  .menu li {
    margin-right: 1px; /* Just set margin to 0? OR 1 if you want? */
  }
  .menu-items {
    border-bottom: 3px solid #f2f2f2;
    padding-bottom: 10px;
    width: 250px;
  }
  .menu-items:hover {
    border-bottom-color: #0065FC;
  }
  .sign-up {
    position: absolute;
    padding-top: 0px;
    margin-top: 40px;
    margin-right: 0px;
    padding-left: 5px;
    color: #0065fc;
    text-decoration: none;
    width: 165px;
    transition: all 0.4s;
    right: 9px;
  }
}
代码语言：javascript
复制
<header class="header">
  <div>
    <div>
      <a href="#" class="header-logo"></a>
      <img src="images/logo/Reservia.svg" alt="Logo Reservia">
    </div>

    <nav class="menu">
      <ul>
        <li><a href="#search-lodging" class="menu-items" title="Hébergements">Hébergements</a></li>
        <li><a href="#search-activities" class="menu-items" title="Activités">Activités</a></li>
      </ul>

      <a href="#" class="sign-up" title="S'inscrire <strong>S'inscrire</strong></a>
       
     </nav>
  </div>

</header>

​

票数 0
EN

Stack Overflow用户

发布于 2021-06-03 21:40:04

这将解决您的问题。您只需从media query中删除margin-right，并将文本居中对齐。

注意：：请在576px或更低版本中测试以查看更正

代码语言：javascript
复制
.header {
  margin: auto;
  max-width: 1440px;
}

.header div {
  display: flex;
  justify-content: space-between;
  height: 100px;
  align-items: center;
  margin: auto;
}

.header img {
  margin: 10px 60px 0px 55px;
}

.menu {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  list-style-type: none;
  margin: 20px 80px 0 0;
  padding-right: 30px;
}

.menu ul {
  display: flex;
  list-style-type: none;
}

.menu-items {
  text-decoration: none;
  color: black;
  font-size: 18px;
}

.menu-items:hover {
  color: #0065fc;
}

.menu li {
  display: flex;
  margin-right: 60px;
  font-weight: normal;
  font-size: 18px;
}

/*-------------------Header mobile size-------------------*/

@media all and (max-width: 576px) {

  /*-- header --*/

  .menu {
    margin-right: 0px;
  }

  .menu nav {
    position: relative;
    flex-basis: 100%;
    order: 2;
    display: flex;
  }

  .menu ul {
    display: flex;
    flex-basis: 100%;
    order: 2;
    position: relative;
    top: 50px;
    right: 160px;
    padding-top: 30px;
    margin-top: 20px;
    margin-left: -30px;
  }

  .menu-items {
    border-bottom: 3px solid #f2f2f2;
    padding-bottom: 10px;
    width: 250px;
  }

  .menu-items:hover {
    border-bottom-color: #0065FC;
  }

  .menu li {
    margin-right: unset;
    text-align: center;
    justify-content: center;
  }

  .sign-up {
    position: absolute;
    padding-top: 0px;
    margin-top: 40px;
    margin-right: 0px;
    padding-left: 5px;
    color: #0065fc;
    text-decoration: none;
    width: 165px;
    transition: all 0.4s;
    right: 9px;
  }
}
代码语言：javascript
复制
<header class="header">
  <div>
    <div><a href="#" class="header-logo"></a>
      <img src="images/logo/Reservia.svg" alt="Logo Reservia">
    </div>

    <nav class="menu">
      <ul>
        <li><a href="#search-lodging" class="menu-items" title="Hébergements">Hébergements</a></li>
        <li><a href="#search-activities" class="menu-items" title="Activités">Activités</a></li>
      </ul>

      <a href="#" class="sign-up" title="S'inscrire <strong>S'inscrire</strong></a>
       
     </nav>
  </div>

</header>

​

Working Fiddle

票数 0
EN

Stack Overflow用户

发布于 2021-06-03 21:49:36

您的.menu li样式的右边距值为60px，这意味着所有列表元素都将具有该边距。

您可以使用以下命令在媒体查询中添加相同的选择器：

代码语言：javascript
复制
.menu li {
  margin-right: 0px;
  padding-left: 30px;
  padding-right: 30px;
}

填充替换了页边距间距，因此列表项中的文本不会相互推高

您应该能够在浏览器的开发人员工具中看到这一点。如果在Elements视图中选择一个元素，它会显示所有应用的样式和类。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67822447

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档