WordPress 站点 Header 布局

Question

在我自己的 non-WP 站点中，我使用 Bootstrap 处理列。这是我第一次尝试没有它的 CSS 定位。我需要对齐我的站点 header 元素，如此处所示，文本元素在页面容器的边缘齐平对齐：

这是 WordPress 生成的HTML：

<div class="site-branding">
    <a href="https://misc-ramblings.com/" class="custom-logo-link" rel="home" aria-current="page">
        <img width="240" height="110" src="https://misc-ramblings.com/wp-content/uploads/2021/09/cropped-misc_ramblings_logo_16x9.gif" class="custom-logo" alt="Miscellaneous Ramblings"/>
    </a>
    <h1 class="site-title">
        <a href="https://misc-ramblings.com/" rel="home">Miscellaneous Ramblings</a>
    </h1>
    <p class="site-description">Semi-random musings, cogent analysis &amp; pithy commentary on God, mankind,  pop culture &amp; politics</p>
</div>

这是回答者对我之前尝试回答这个问题时友情提供的CSS。仅供参考，这些是我自定义 CSS.

中这些 HTML 元素的 only 定位规则

.site-branding {
  display:                  grid;
  grid-template-columns:    auto 1fr;
  justify-content:          space-between;
  align-items:              center;
  text-align:               right;
}

.custom-logo-link {
  grid-row:                 1/3;
}

.site-title, .site-description {
  align-self:               end;
  margin:                   0;
}

.site-description {
  grid-column:              2;
}

.custom-logo {
    width:      300px;
    max-width: none;
}

这就是我得到的：

所以我的问题的垂直定位部分已经解决，徽标和文本元素现在彼此垂直对齐，但出于某种原因，文本元素仍然没有与页面容器的右侧对齐 (使用站点横幅图像作为该边缘位置的视觉参考）。

我该如何纠正？

Answer 1

只需将 width: 100%; 添加到 .site-branding 样式。它将使您的页眉与页面容器一样大。

WordPress 站点 Header 布局

WordPress Site Header Layout

html

css

wordpress

responsive-design