第一次使用 HTML 块作为自定义标头，它看起来不太好，请帮忙！

已发表: 2023-08-09

你好！

我正在为这个网站使用自定义标题，因为 Astra 的主题工具没有我想要的那么好。我仍在学习为 Web 开发编写代码，并且 HTML 上的这个自定义标头是我迄今为止的主要项目。

我使用 Visual Studio Code 和 Google Chrome 来可视化标题。我认为完美的计划是将 HTML 代码放入 Astra 主题定制的标头生成器中的“HTML 块”中。没想到宽度会受到块的限制。

**我的标题只有 HTML 代码：**

https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5

**我在网站上的标头位于标头构建器的 HTML 块内：**

https://preview.redd.it/9t43ltau2zgb1.jpg?width=1280&format=pjpg&auto=webp&s=81e6f66097e0a81c0caa4a4ed8019c10b0348c3d

经过一些研究后，我发现了一些 CSS 代码来“解决”这个问题，但它根本没有解决这个问题。它给我带来了更多的问题。我使用了下一个代码：

.ast-builder-html-element
宽度：100vw；

**现在标题看起来像这样：**

https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e

右侧的元素消失了，“CONTACTO”块稍微移动到底部。

编辑：我解决了“CONTACTO”移动到底部的问题，它是由 <br> 标签引起的。我用CSS删除了它们，这样问题就解决了！

所以为什么？

我不知道我的 HTML 代码是否有问题，或者是使用 HTML 块出现的问题，我应该以其他方式执行此操作。我完全迷路了。

我将非常感谢任何帮助！

**我分享我的标题 HTML 代码：**

<html>
<头>
<script src=”https://kit.fontawesome.com/4d7716fb70.js” crossorigin=”anonymous”></script>
<风格>
.cabecera-navbar-principal
溢出：隐藏；
背景颜色：#fff；
字体系列：蒙特塞拉特；

.cabecera-navbar-校长
向左飘浮;
字体大小：16px；
字体粗细：600；
颜色：#424242；
文本对齐：居中；
内边距：15px 15px；
文本装饰：无；

.cabecera-下拉菜单
向左飘浮;
溢出：隐藏；

.cabecera-dropdown .cabecera-dropbtn
边框：无；
概要：无；
颜色：#424242；
内边距：14 像素 16 像素；
背景颜色：继承；
字体：继承；
保证金：0；
字体粗细：600；

.cabecera-navbar-principal a:hover, .cabecera-dropdown:hover .cabecera-dropbtn
颜色：#003398；

.cabecera-下拉内容
显示：无；
位置：绝对；
背景颜色：#fff；
宽度：100%；
左：0；
顶部边框：2px 实线#0080ff；
框阴影：0px 8px 16px 0px rgba(0,0,0,0.2);
z 索引：1；

.cabecera-dropdown:悬停 .cabecera-dropdown-content
显示：块；

.cabecera-column
向左飘浮;
宽度：19%；
左内边距：10px；
背景颜色：#fff；
高度：450 像素；

.cabecera-a 列
浮动：无；
颜色：#424242；
文本装饰：无；
显示：块；
文本对齐：左对齐；

.columnas-marcas
向左飘浮;
宽度：100%；
左内边距：20px；
右内边距：20px；
顶部内边距：20px；
底部填充：0px；
背景颜色：#fff；
高度：450 像素；
行高：0.1；
列：4；

.columnas-marcas a
浮动：无；
颜色：#424242；
文本装饰：无；
显示：块；
文本对齐：左对齐；

.cabecera-row：之后
内容： ””;
显示：表；
明确：两者；

.cabecera-categoria-padre
字体大小：1.17em！重要；
字体粗细：粗体！重要；
顶部边距：0.3em；
边框底部：1px实心#E3E3E3；

</风格>
<正文>
<div class=”cabecera-navbar-principal”>
<div class=”cabecera-dropdown”>
<button class=”cabecera-dropbtn” onclick=”window.location.href='/productos'”>产品 <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242; ”></i></按钮>
<div class=”cabecera-dropdown-content”>
<div class=”cabecera-row”>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/audio”>音频</a>
<a href=”/categoria-producto/audio/accesorios-audio”>配件</a>
<a href=”/categoria-producto/audio/audifonos”>AUDIFONOS</a>
<a href=”/categoria-producto/audio/barras-de-sonido”>BARRAS DE SONIDO</a>
<a href=”/categoria-producto/audio/bocinas”>BOCINAS</a>
<a href=”/categoria-producto/audio/sistemas-de-audio”>音频系统</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/Electronica”>电子</a>
<a href=”/categoria-producto/electronica/accesorios-electronica”>配件</a>
<a href=”/categoria-producto/Electronica/consolas”>CONSOLAS</a>
<a href=”/categoria-producto/Electronica/drones”>无人机</a>
<a href=”/categoria-producto/Electronica/tablets”>平板电脑</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/hogar”>HOGAR</a>
<a href=”/categoria-producto/hogar/calentadores”>CALENTADORES</a>
<a href=”/categoria-producto/hogar/colchones”>COLCHONES</a>
<a href=”/categoria-producto/hogar/planchas-vapor-aspiradoras”>PLANCHAS DE VAPOR / ASPIRADORAS</a>
<a href=”/categoria-producto/hogar/ventiladores”>VENTILADORES</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/linea-blanca”>LINEA BLANCA</a>
<a href=”/categoria-producto/linea-blanca/cafeteras”>咖啡馆</a>
<a href=”/categoria-producto/linea-blanca/congeladores”>CONGELADORES</a>
<a href=”/categoria-producto/linea-blanca/freidoras-hornos”>FREIDORAS / HORNOS</a>
<a href=”/categoria-producto/linea-blanca/licuadoras”>LICUADORAS</a>
<a href=”/categoria-producto/linea-blanca/parrillas”>PARRILLAS</a>
<a href=”/categoria-producto/linea-blanca/procesador-alimentos-ollas”>PROCESADOR DE ALIMENTOS / OLLAS</a>
<a href=”/categoria-producto/linea-blanca/tostadoras”>TOSTADORAS</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/video”>视频</a>
<a href=”/categoria-producto/video/accesorios-video”>配件</a>
<a href=”/categoria-producto/video/pantallas”>PANTALLAS</a>
<a href=”/categoria-producto/video/reproductores-dvd”>REPRODUCTORES DVD</a>
</div>
</div>
</div>
</div>
<div class=”cabecera-dropdown”>
<button class=”cabecera-dropbtn”>马卡斯 <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242;”></i></button>
<div class=”cabecera-dropdown-content”>
<div class=”cabecera-row”>
<div class=”columnas-marcas”>
<a href=”/categoria-producto/marca/aiwa”>AIWA</a>
<a href=”/categoria-producto/marca/altec-lansing”>ALTEC LANSING</a>
<a href=”/categoria-producto/marca/alux”>ALUX</a>
<a href=”/categoria-producto/marca/arctic-king”>北极王</a>
<a href=”/categoria-producto/marca/aroma”>芳香</a>
<a href=”/categoria-producto/marca/atvio”>ATVIO</a>
<a href=”/categoria-producto/marca/backyard-grill”>后院烧烤</a>
<a href=”/categoria-producto/marca/beautyrest”>BEAUTYREST</a>
<a href=”/categoria-producto/marca/black-n-decker”>BLACK & DECKER</a>
<a href=”/categoria-producto/marca/blackweb”>BLACKWEB</a>
<a href=”/categoria-producto/marca/element”>ELEMENT</a>
<a href=”/categoria-producto/marca/elite”>精英</a>
<a href=”/categoria-producto/marca/emeril-lagasse”>EMERIL LAGASSE</a>
<a href=”/categoria-producto/marca/farberware”>FARBERWARE</a>
<a href=”/categoria-producto/marca/ge”>GE</a>
<a href=”/categoria-producto/marca/generico”>GENERICO</a>
<a href=”/categoria-producto/marca/hamilton-beach”>汉密尔顿海滩</a>
<a href=”/categoria-producto/marca/hisense”>海信</a>
<a href=”/categoria-producto/marca/hunterspider”>HUNTERSPIDER</a>
<a href=”/categoria-producto/marca/innovative-technology”>创新技术</a>
<a href=”/categoria-producto/marca/instant-vortex”>即时涡流</a>
<a href=”/categoria-producto/marca/jungletac”>JUNGLETAC</a>
<a href=”/categoria-producto/marca/kvision”>K-VISION</a>
<a href=”/categoria-producto/marca/kempler-n-strauss”>肯普勒和施特劳斯</a>
<a href=”/categoria-producto/marca/lg”>LG</a>
<a href=”/categoria-producto/marca/majority”>多数</a>
<a href=”/categoria-producto/marca/maximatic”>MAXIMATIC</a>
<a href=”/categoria-producto/marca/microsoft”>微软</a>
<a href=”/categoria-producto/marca/momentum”>动量</a>
<a href=”/categoria-producto/marca/ninja”>忍者</a>
<a href=”/categoria-producto/marca/nutribullet”>NUTRIBULLET</a>
<a href=”/categoria-producto/marca/onn”>ONN</a>
<a href=”/categoria-producto/marca/pelonis”>PELONIS</a>
<a href=”/categoria-producto/marca/powerxl”>POWERXL</a>
<a href=”/categoria-producto/marca/rca”>RCA</a>
<a href=”/categoria-producto/marca/ridgeway”>RIDGEWAY</a>
<a href=”/categoria-producto/marca/rival”>RIVAL</a>
<a href=”/categoria-producto/marca/samsung”>三星</a>
<a href=”/categoria-producto/marca/shark”>SHARK</a>
<a href=”/categoria-producto/marca/sony”>索尼</a>
<a href=”/categoria-producto/marca/speedy-cook”>快速烹饪</a>
<a href=”/categoria-producto/marca/steelpro”>STEELPRO</a>
<a href=”/categoria-producto/marca/tcl”>TCL</a>
<a href=”/categoria-producto/marca/venturer”>冒险家</a>
<a href=”/categoria-producto/marca/vissani”>VISSANI</a>
<a href=”/categoria-producto/marca/vivitar”>VIVITAR</a>
<a href=”/categoria-producto/marca/vizio”>VIZIO</a>
<a href=”/categoria-producto/marca/westinghouse”>西屋</a>
</div>
</div>
</div>
</div>
<a href=”/ayuda”>AYUDA</a>
<a href=”/contacto”>联系方式</a>
</div>
</正文>
</头>
</html>