CODEWITHSUNDEEP
htmlcss
The Codesee
The Codesee

Reputation: 3783

Make centered text start from the same horizontal position as non-centered text

I have a ul and h2 element. The container that both elements are in has padding-left: 4%.

I want the h2 and ul elements to both start from the same horizontal position so that they're directly below each other. The problem is that as the contents of the li elements are centered, the first element is not directly below the h2 - there's a gap:

enter image description here

If I add margin-left: -3% to the first li element, it pushes it to the left and removes the gap:

enter image description here

But they're not exactly aligned and I'd have to fiddle around with the margin to make it exact. Is there an alternative way to make them directly start from the same point?

#menu {
  background: #bb1919;
  padding: 0 4%;
}

#menu h1 {
  margin: 0;
  font-weight: normal;
  padding-top: 10px;
}

#menu ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  align-items: center;
  margin: 0;
}

#menu li {
  display: inline-block;
  border-bottom: 4px solid transparent;
  cursor: pointer;
  text-align: center;
}

#menu li:first-of-type {
  /* margin-left: -2%; */
}

#menu li:hover {
  border-bottom: 4px solid #fff;
}

#menu li:first-of-type p {
  border-left: none;
}

#menu li p {
  border-left: 1px solid #d0d0d06b;
  padding: 0 14px;
  margin: 14px 0 8px 0;
}
<div id="menu">
  <h1>NEWS</h1>
  <ul>
    <li>
      <p>Home</p>
    </li>
    <li>
      <p>Coronavirus</p>
    </li>
    <li>
      <p>UK</p>
    </li>
    <li>
      <p>World</p>
    </li>
    <li>
      <p>Business</p>
    </li>
    <li>
      <p>Politics</p>
    </li>
  </ul>
</div>

JsFiddle: https://jsfiddle.net/naq0mb48/

Upvotes: 0

Views: 52

Answers (1)

Johannes
Johannes

Reputation: 67748

Use :first-of-type rules for li and the p inside li to set margin-left and padding-left to 0 and text-align to left.

ADDITION after comment:

You can add margin-left: -14px; text-indent: 14px; to the #menu li:first-of-type rule to achieve the desired underline left of the left-aligned first menu entry on hover.

#menu {
  background: #bb1919;
  padding: 0 4%;
}

#menu h1 {
  margin: 0;
  font-weight: normal;
  padding-top: 10px;
}

#menu ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  align-items: center;
  margin: 0;
}

#menu li {
  display: inline-block;
  border-bottom: 4px solid transparent;
  cursor: pointer;
  text-align: center;
}
#menu li:hover {
  border-bottom: 4px solid #fff;
}

#menu li p {
  border-left: 1px solid #d0d0d06b;
  padding: 0 14px;
  margin: 14px 0 8px 0;
}

#menu li:first-of-type {
  text-align: left;
  padding-left: 0px;
  margin-left: -14px;
  text-indent: 14px;

}
#menu li:first-of-type p {
  border-left: none;
  padding-left: 0px;
}
<div id="menu">
  <h1>NEWS</h1>
  <ul>
    <li>
      <p>Home</p>
    </li>
    <li>
      <p>Coronavirus</p>
    </li>
    <li>
      <p>UK</p>
    </li>
    <li>
      <p>World</p>
    </li>
    <li>
      <p>Business</p>
    </li>
    <li>
      <p>Politics</p>
    </li>
  </ul>
</div>

Upvotes: 2

Related Questions