如何调整 flexbox 中
的高度

huangapple go评论147阅读模式
英文:

How to adjust height of <hr> in flexbox

问题

我想缩短hr元素而不是将其拉伸到整个容器的高度,也许是高度的三分之一。感谢您的帮助。
【它看起来像什么】(https://i.stack.imgur.com/SLTF9.png)

我尝试给hr元素添加高度属性而不是拉伸它,但是这样做后它就消失了。

英文:

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

body {
  font-family: &quot;martian&quot;, serif;
}

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

hr {
  align-self: stretch;
  color: #fff;
}

<!-- language: lang-html -->

&lt;header&gt;
  &lt;nav&gt;
    &lt;a href=&quot;&quot; class=&quot;nav-link&quot;&gt;Classroom&lt;/a&gt;
    &lt;hr&gt;
    &lt;a href=&quot;&quot; class=&quot;nav-link&quot;&gt;Manual&lt;/a&gt;
    &lt;hr&gt;
    &lt;div class=&quot;logo-wrapper&quot;&gt;
      &lt;a href=&quot;homepage.html&quot; class=&quot;logo&quot;&gt;&lt;img src=&quot;images/tgm_logo.png&quot; class=&quot;logo&quot;&gt;&lt;/a&gt;
      &lt;p class=&quot;motto&quot;&gt;Engineering Behind Great Inventions&lt;/p&gt;
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;a href=&quot;&quot; class=&quot;nav-link&quot;&gt;About&lt;/a&gt;
    &lt;hr&gt;
    &lt;a href=&quot;&quot; class=&quot;nav-link&quot;&gt;Contact&lt;/a&gt;
  &lt;/nav&gt;
&lt;/header&gt;

<!-- end snippet -->

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.

答案1

得分: 0

height 对我来说效果很好。

你只需将其绝对调整大小,使用 pxptmm 等。

使用 % 会使其高度为 0,因为父元素的高度为 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.

答案2

得分: 0

明确为 hr 指定 height 属性可以正常工作。你可能尝试使用百分比。

关于百分比,MDN 中 height 属性的说明

> 如果未明确指定包含块的高度
> ...(百分比)值计算为 auto

由于 nav 没有明确指定 height 值,hr 回退到 auto,这在这种情况下 (对于 Flexbox 布局) 意味着 min-content。这可能是你的 hr 看起来 "消失" 的原因。

如果你nav 指定明确的高度,你就可以像预期的那样在 hr 上使用百分比。另外,你也可以直接为 hr 指定明确的高度

或者(但仍然使用明确的值),你可以使用边距:设置边距会减小元素可以伸展到的大小。


注意HTML5 定义了 &lt;hr&gt; 元素 为 "段落级的主题分隔符"。类似地,ARIA 定义了 separator 角色(即 &lt;hr&gt; 的隐式角色)为 "分隔和区分内容部分或菜单项组的分隔符"。

除非你认为将所有导航项分成单独的组(每组只有一个项目!)是合理的,否则你应该考虑使用 presentation 角色 来声明一些 &lt;hr&gt; 元素。

或者,你可以使用伪元素创建视觉分隔符,例如:

<!-- 开始代码片段:js 隐藏:true 控制台:true Babel:false -->

<!-- 语言:lang-css -->
ul {
  margin: 0;
  padding: 0;
  border: 1px solid black;
  display: flex;
}
li {
  display: flex;
  align-items: center;
}

/* 在每个后续 LI 之前添加分隔符 */
li+li::before {
  content: "";
  width: 1px;
  height: 80%;
  display: inline-block;
  background-color: black;
}

a {
  padding: .8rem .4rem;
  display: inline-block;
}

<!-- 语言:lang-html -->
<nav>
  <ul>
    <li><a href>Home</a></li>
    <li><a href>About</a></li>
    <li><a href>Contact</a></li>
  </ul>
</nav>

<!-- 结束代码片段 -->
英文:

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 &lt;hr&gt; element as "a paragraph-level thematic break". Similarly, ARIA defines the separator role (i.e. &lt;hr&gt;'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 &lt;hr&gt; elements with the presentation role.

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

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

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: &quot;&quot;;
  width: 1px;
  height: 80%;
  display: inline-block;
  background-color: black;
}

a {
  padding: .8rem .4rem;
  display: inline-block;
}

<!-- language: lang-html -->

&lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月10日 23:39:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/76877296.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定