Question 227496 in Html Question posted in
Some basic documentation can be found here.

Html – How to adjust height of <hr> in flexbox

I’m making the header of my website and decided to use hr between navigation links instead of border property since I didn’t wanna get into nth child pseudo. Navigation links and logo wrapper are aligned in the center and I stretched hr element.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "martian", serif;
}

nav {
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

hr {
  align-self: stretch;
  color: #fff;
}
<header>
  <nav>
    <a href="" class="nav-link">Classroom</a>
    <hr>
    <a href="" class="nav-link">Manual</a>
    <hr>
    <div class="logo-wrapper">
      <a href="homepage.html" class="logo"><img src="images/tgm_logo.png" class="logo"></a>
      <p class="motto">Engineering Behind Great Inventions</p>
    </div>
    <hr>
    <a href="" class="nav-link">About</a>
    <hr>
    <a href="" class="nav-link">Contact</a>
  </nav>
</header>

I want to shorten the hr instead of strecthing it through the whole container, maybe third of the height. I would appreciate your help.
How it looks like

I tried giving a height attribute to the hr instead of streching it, however it just got vanished after doing so.

Tags:

2

Answers


  1. 0

    The height is working good for me.

    You just have to resize it absolutely, as using px, pt, mm, etc.

    Using % makes it height 0 because of 0-height parent element.

    Login or Signup to reply.
  2. 0

    Explicitly specifying height for hr works fine. You probably tried to use percentages.

    Regarding percentages, MDN notes for height:

    If the height of the containing block is not specified explicitly
    … the (percentage) value computes to auto.

    Since nav hasn’t specified a height value explicitly, hr falls back to auto, which (for Flexbox Layout) means min-content in this case I believe. This would be the reason why your hr seems to "vanish".

    If you specify an explicit height to nav, you can use percentages on hr as you’d expect. Alternatively, you could also specify an explicit height to hr directly.

    Or (but still with explicit values), you could use margins: Having a margin will reduce the element’s size it can stretch to.

    Note: HTML5 defines the <hr> element as "a paragraph-level thematic break". Similarly, ARIA defines the separator role (i.e. <hr>‘s implicit role) as "a divider that separates and distinguishes sections of content or groups of menuitems".

    Unless you deem it reasonable to divide all your navigation items into separate groups (with only one item each!), you should think about declaring some of your <hr> elements with the presentation role.

    Or, you could use pseudo-elements to create visual separators, e.g. like this:

    ul {
  margin: 0;
  padding: 0;
  border: 1px solid black;
  display: flex;
}
li {
  display: flex;
  align-items: center;
}

/*Separator before every subsequent LI*/
li+li::before {
  content: "";
  width: 1px;
  height: 80%;
  display: inline-block;
  background-color: black;
}

a {
  padding: .8rem .4rem;
  display: inline-block;
}
    <nav>
  <ul>
    <li><a href>Home</a></li>
    <li><a href>About</a></li>
    <li><a href>Contact</a></li>
  </ul>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search