Flex项似乎继承了一个我找不到的表单的高度属性。

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

The Flex Items Seem to Inherit a Height Property From a Form That I Can't Find

问题

I understand you want a translation of the provided code and description, excluding the code itself. Here's a translation of your description:

我理解你需要提供的是代码和问题描述的翻译，以下是问题描述的翻译：

我正在尝试通过使用Flexbox来拉伸我的导航栏的内容，以填充整个导航栏的宽度。但似乎存在一个问题，因为导航栏内部的表单设置了特定的高度，从而拉伸了作为其兄弟元素的另外两个弹性项目。

这是我的标记：
（代码已省略）

我正在使用Compass的Flexbox模块，并且我有一个用于媒体查询的mixin。以下是与导航栏相关的所有CSS：

（代码已省略）

这里是问题的屏幕截图：

Flex项似乎继承了一个我找不到的表单的高度属性。

我尝试过使用display: inline-block，但这并不能以我想要的方式填充容器。我已经仔细检查了所有样式，但没有一个指定了高度。当我使用Chrome的DevTool删除表单时，其兄弟元素的高度恢复正常。我确信是表单的问题。只有在我添加该元素到标记中后才出现。我不知道是什么问题。即使ChatGPT也无法正确诊断问题。

如果你需要更多帮助，请随时提出具体的问题或需求。

英文:

I'm trying to stretch out the contents of my navigation bar to fill the width of the bar, so I'm using Flexbox. There seems to be a problem because the form within the navigation bar is set to a certain height that stretches the other two flex items that are its siblings.

Here is my markup:

  1. <?php
  2. // Define HTML structure of the Header Menu
  3. $args = array (
  4.   'theme_location' => 'header-menu',
  5.   'menu_class' => 'nav-list',
  6.   'menu_id' => null,
  7.   'container' => 'nav',
  8.   'link_before' => '<h2>',
  9.   'link_after' => '</h2>'
  10. );
  11. ?>
  12. <!DOCTYPE html>
  13. <html <?php language_attributes(); ?>>
  14.   <head>
  15.     <title><?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
  16.     <meta charset="<?php bloginfo( 'charset' ); ?>">
  17.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18.     <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
  19. <?php wp_head(); ?>
  20.   </head>
  21.   <body <?php body_class(); ?>>
  22.     <div id="navigation" class="wrapper">
  23.       <header>
  24.         <h1>
  25.           <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
  26.             <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.11 122.11">
  27.               <defs><style>.moon{stroke:#000;stroke-miterlimit:10;}</style></defs>
  28.               <path class="moon" d="m96.69,15.5c-1.03-.81-2.47-.85-3.55-.1-1.08.75-1.55,2.1-1.16,3.36,2.9,9.36,3.35,19.38,1.3,28.99-6.62,31.04-37.25,50.9-68.29,44.28-1.58-.34-3.21-.76-4.97-1.3-1.25-.38-2.61.09-3.35,1.16-.74,1.08-.7,2.51.1,3.55,8.22,10.55,19.94,17.9,33.02,20.69,3.99.85,7.97,1.26,11.9,1.26,26.29,0,49.98-18.35,55.68-45.07,4.59-21.5-3.34-43.27-20.68-56.81Z"/>
  29.               <path class="star"d="m65.33,15.55c-.2-.62-.78-1.04-1.43-1.04h-10.86l-3.36-10.33c-.2-.62-.78-1.04-1.43-1.04s-1.23.42-1.43,1.04l-3.36,10.33h-10.86c-.65,0-1.23.42-1.43,1.04-.2.62.02,1.29.54,1.68l8.79,6.38-3.36,10.33c-.2.62.02,1.29.54,1.68.26.19.57.29.88.29s.62-.1.88-.29l8.79-6.38,8.79,6.38c.53.38,1.24.38,1.76,0,.53-.38.75-1.06.54-1.68l-3.36-10.33,8.79-6.38c.53-.38.75-1.06.54-1.68Z"/>
  30.               <path class="star" d="m28.02,38.34h-7.94l-2.45-7.55c-.2-.62-.78-1.04-1.43-1.04s-1.23.42-1.43,1.04l-2.45,7.55h-7.94c-.65,0-1.23.42-1.43,1.04-.2.62.02,1.29.54,1.68l6.42,4.67-2.45,7.55c-.2.62.02,1.29.54,1.68.53.38,1.24.38,1.76,0l6.42-4.67,6.42,4.67c.26.19.57.29.88.29s.62-.1.88-.29c.53-.38.75-1.06.54-1.68l-2.45-7.55,6.42-4.67c.53-.38.75-1.06.54-1.68-.2-.62-.78-1.04-1.43-1.04Z"/>
  31.             </svg>
  32.             <b class="invisible"><?php bloginfo('name'); ?></b>
  33.           </a>
  34.         </h1>
  35.       </header>
  36.       <form id="search" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
  37.         <input type="search" class="input-text" name="s" placeholder="Search a neighborhood or city" autocomplete="off">
  38.       </form>
  39.       <?php if ( has_nav_menu( 'header-menu' ) ) : wp_nav_menu( $args ); endif; ?>
  40.     </div>

I'm using Compass's Flexbox module and I have a mixin for media queries. Here's all the related CSS to the navigation bar:

  1. // Define all navigation bar related styles here
  3. #navigation {
  4.   padding-top: $space-horizontal;
  5.   padding-bottom: $space-horizontal;
  6.   @include flexbox((
  7.     display: flex,
  8.     flex-direction: row
  9.   ));
  10.   position: relative;
  12.   > header {
  13.     width: 24px;
  14.     padding-right: $space-horizontal * 0.5;
  16.     h1 > a {
  17.       padding-bottom: 0;
  18.       overflow: hidden;
  20.       > #logo {
  21.         width: 24px;
  22.         height: 24px;
  24.         &:hover,
  25.         &:active {
  26.           .moon {
  27.             fill: #FFF;
  28.             transition: fill 0.1s ease-in;
  29.           }
  31.           .star {
  32.             fill: #FFDD5C;
  33.             transition: fill 0.1s ease-in;
  34.           }
  35.         }
  36.       }
  37.     }
  38.   }
  40.   a {
  41.     color: $color-foreground;
  43.     &:hover,
  44.     &:active {
  45.       padding-bottom: 0;
  46.       border-bottom: 0;
  47.     }
  48.   }
  50.   // Menu
  51.   > .menu-header-menu-container {
  52.     padding-left: $space-horizontal * 0.5;
  53.     @include flex(1);
  55.     > .nav-list {
  56.       margin-top: $default-heading-size + 2 * $space-horizontal;
  57.       position: absolute;
  58.       top: 0;
  59.       right: 0;
  60.       bottom: 0;
  61.       left: 0;
  63.       @include respond-above(sm) {
  64.         margin-top: 0;
  65.         position: static;
  66.         @include flexbox((
  67.           display: flex,
  68.           flex-direction: row,
  69.         ));
  71.         > .menu-item {
  72.           padding-right: $space-horizontal * 0.5;
  73.           padding-left: $space-horizontal * 0.5;
  74.           @include flex(1);
  76.           a {
  77.             display: block;
  78.           }
  79.         }
  80.       }
  81.     }
  82.   }
  84.   // Search
  85.   > #search {
  86.     padding-right: $space-horizontal * 0.5;
  87.     padding-left: $space-horizontal * 0.5;
  88.     display: none;
  89.     @include flex(3);
  91.     @include respond-above(sm) {
  92.       display: block;
  93.     }
  95.     > .input-text {
  96.       width: 100%;
  97.       font-size: $default-heading-size;
  98.       color: $color-foreground;
  99.       padding-top: 0;
  100.       padding-bottom: 0;
  101.       border: 0;
  102.     }
  103.   }
  104. }

Here's a screenshot of the problem:
Flex项似乎继承了一个我找不到的表单的高度属性。

I've tried using display: inline-block but that doesn't fill out the container the way I want them to. I've tried double-checking all the styles, and none of them have a specified height. When I delete the form using Chrome's DevTool, the height of its siblings go back to normal. I'm sure it's the form. It only appeared when I added that element to the markup. I don't know what it is. Even ChatGPT can't diagnose the problem properly.

答案1

得分: 0

我能在处理其他元素的样式时修复它。问题不在表单中。可能只是因为在表单之前，我没有注意到问题存在，因为项目都对齐了。问题出现在<header>上的溢出上。锚点标签有一个溢出的不可见的<h1>元素，导致高度溢出到导航栏之外。当我将锚点标签的display属性设置为block并为其设置适当的高度时，溢出问题就解决了。

英文:

I was able to fix it when I moved on to styling other elements. The problem wasn't in the form. I probably just didn't notice the problem was there before the form because the items were aligned. The problem was with the overflow on the &lt;header&gt;. The anchor tag had an overflowing invisible &lt;h1&gt; element that was causing the height to overflow off the navigation bar. When I set the display property of the anchor tag to block and set a proper height for it the overflow was fixed.

huangapple
  • 本文由 发表于 2023年6月15日 12:02:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/76479026.html
  • compass
  • css
  • flexbox
  • forms
  • sass
匿名

发表评论

匿名网友

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

确定