javascript - 我想在 ul 列表中有一个边框底部

问题描述

我正在使用 576px 处的断点进行响应式处理

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

有人可以帮我吗？

提前致谢！祝你今天过得愉快！

到目前为止，这是我的代码：

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

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

标签： javascripthtmlcsshtml-lists

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

您可能可以在媒体查询中添加相同的选择器：

.menu li {
  margin-right: 0px;
  padding-left: 30px;
  padding-right: 30px;
}

padding 替换了 margin 间距，因此列表项中的文本不会相互推挤

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

javascript - 我想在 ul 列表中有一个边框底部

问题描述

解决方案

推荐阅读