Question

我有两条 links子,需要完全集中,每页各占半数。我的那部分人与他们进行了斗争,但最终却坐下来。我需要一条灰底边界,横跨整页,当你把灰.放在通往蓝色所需的连接之下时。例如:

https://i.stack.imgur.com/jELbb.png” rel=“nofollow noreferer”>example

Here s what i have for the html:

    <div class="topnav">
        <a class="accommodations" href="#accommodations">Accommodations</a>
        <a class="activities" href="#activities"> Activities </a>
    </div>

这里指的是我对移动式车辆的看法:

.topnav {
    padding-top: 17px;
    border-bottom: solid 3px #808080;
    text-align: center;
    display: flex;
    border-top: none;
    padding-bottom: 10px;
}

.topnav a {
    width: 50%;
    padding-top: 17px;
    border-top: none;
}

.topnav a:hover {
    padding-top: 17px;
    border-top: none;
    border-bottom: solid 3px #0065fc;
    padding-bottom: 10px;
}

When I add the hover affect it does have the blue bar however, instead of covering the grey it appears on top and seems to push the grey bar down. On the desktop dimensions the hover has to appear at the top with a space between the words and the bar which is why I have the padding on the top. Without it the words move when you hover over them.

我尝试调整/处理/消除在底层的婚礼,把边界线上加到个人,而不是整体上,甚至用消极的边.,看看某些小 mi是否使这一问题消失。它的确在把边界线上添加到个人身上,但边境线横跨整页,而只是随着右边的这种微小差距而停止活动。

I would also like to add that I have maybe a months worth of experience with coding, and by experience i mean trial by fire and no direct teacher so everything I know is from various books, googling, and free coding camps. I am probably doing something very obviously wrong and I apologize but any help would be greatly appreciated because I can tell you begging it to work hasn t helped yet.

--update-- okay so i found that if i remove the border from the .topnav and instead put it on the individual the hover works the way I want it to however i m still running into the issue of the border not spanning the entire page and instead having the weird space on the right side after activities.

Answer 1

You could do something like this. For your css style

  .nav-container {
    border-bottom: solid 3px #808080;
    width: 100%;
  }

  .topnav {
    padding-top: 17px;
    text-align: center;
    display: flex;
    max-width: 1200px; /* You can remove this part if you need full width */
    margin: auto;
  }
  
  .topnav a {
    width: 50%;
    padding-bottom: 10px;
    padding-top: 17px;
    border-top: none;
  }

  .topnav a:hover {
    border-bottom: solid 3px #0065fc;
    margin-bottom: -3px;
  }

For your HTML

<div class="nav-container">
  <div class="topnav">
    <a class="accommodations" href="#accommodations">Accommodations</a>
    <a class="activities" href="#activities"> Activities </a>
  </div>
</div>

友情链接