Question

我的网页上有以下标记:

<h1 id="some-fragment">
    <a href="#some-fragment" class="fragment-link">
        <svg height="16" width="16" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2">
          <path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path>
              <line x1="8" y1="12" x2="16" y2="12"></line>
        </svg>
    </a>
    Header text 
    <code>Ooh, a code block</code>
</h1>

缩略语

/* irrelevant to this, but looks better */
a {
  text-decoration: none
}

h1 {
  display: flex;
  align-items: center;
}

svg {
  display: block;
}

code {
  padding: 2px 4px;
  background: #888;
  border-radius: 4px;
}

我想做的是,垂直地将icon与标题案文相匹配,但当我增加<代码>的显示:flex时,该代码将表面上看。它被压倒了头版,失去“文字”之后的间隔,而且似乎在成长和安放;与案文相比,从纵向上走。 <代码>flex-grow:0似乎在此具有效力。

我只想看一下它是如何去的/外在的<代码>上:flex ,而是放在后面。

Edit: I m looking for CSS fixes, markup can t be adjusted really. The header text ("Header text " & ) are one item, can t be split up.

Answer 1

根据我先前的答复,增加了该法典。

我在前面加上了你似乎想要修改的两点,然后对这块 wrap子适用法。

a {
  text-decoration: none
}

.header-title{
    display:flex;
    align-items:center;
    gap:5px;
}

svg {
  display: block;
}

code {
  padding: 2px 4px;
  background: #888;
  border-radius: 4px;
}

<h1 id="some-fragment">
  <div class="header-title">
    <a href="#some-fragment" class="fragment-link">
      <svg height="16" width="16" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2">
        <path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path>
        <line x1="8" y1="12" x2="16" y2="12"></line>
      </svg>
    </a>
    Header text
  </div>

  <code>Ooh, a code block</code>
</h1>

Probably the best flexbox resource is here: Flexbox Tips and Tricks

友情链接