Solution 1 :

Yes, You need to make the container navbar have display: flex; and add a width of 50% to the child divs. See here:

Also I added text-align:center; to each child so It makes it centered.

nav > a:nth-child(1){
width: 88px;
color: #000000b8;
font-size: 17px;
font-weight: bold;
padding: 0px 18px;
text-decoration: none;
pointer-events: initial;
line-height: 25px;
position: relative;
display: inline-block;
width: 50%;
text-align: center;
}


nav > a:nth-child(2){
width: 88px;
color: #000000b8;
font-size: 17px;
font-weight: bold;
padding: 0px 18px;
text-decoration: none;
pointer-events: initial;
line-height: 25px;
position: relative;
display: inline-block;
width: 50%;
text-align: center;
}


nav > a:nth-child(1):after{
content: '';
width: 100%;
height: 3px;
position: absolute;
left: -16px;
bottom: -12px;
margin-left: 0px;
background-color: #ffc107;
display: block;
}

.navbar {
  display: flex;
  position: relative;
}
<nav class="navbar navbar-fixed-top">
<a href="/popular" class="mapxr">Popular</a>
<a href="/ect" class="mapxr">ect</a>
</nav>

Solution 2 :

Does it right?

<style>
nav > a:nth-child(n){
width:88px;
color: #000000b8;
font-size: 17px;
font-weight: bold;
text-decoration: none;
pointer-events: initial;
line-height: 25px;
position: relative;
display: inline-block;
}

a{
  text-align:center;
}

nav > a:nth-child(1):after{
content: '';
width: 100%;
height: 3px;
position: absolute;
background-color: #ffc107;
display: block;
}

</style>

<nav class="navbar navbar-fixed-top">
<a href="/popular" onclick='return false' class="mapxr">Popular</a>
<a href="/ect" onclick='return false' class="mapxr">ect</a>
</nav>

Problem :

I would like it to come out as follows, the left and right yellow lines divided by the width of the container

enter image description here

enter image description here

I’m wrong I am currently

enter image description here

This is my css and html that I have

nav>a:nth-child(1) {
  width: 88px;
  color: #000000b8;
  font-size: 17px;
  font-weight: bold;
  padding: 0px 18px;
  text-decoration: none;
  pointer-events: initial;
  line-height: 25px;
  position: relative;
  display: inline-block;
}

nav>a:nth-child(2) {
  width: 88px;
  color: #000000b8;
  font-size: 17px;
  font-weight: bold;
  padding: 0px 18px;
  text-decoration: none;
  pointer-events: initial;
  line-height: 25px;
  position: relative;
  display: inline-block;
}

nav>a:nth-child(1):after {
  content: '';
  width: 100%;
  height: 3px;
  position: absolute;
  left: -16px;
  bottom: -12px;
  margin-left: 0px;
  background-color: #ffc107;
  display: block;
}
<nav class="navbar navbar-fixed-top">
  <a href="/popular" class="mapxr">Popular</a>
  <a href="/ect" class="mapxr">ect</a>
</nav>

By

Leave a Reply

Your email address will not be published. Required fields are marked *