删除其中一个重复表单时，不会显示输入

Question

我有下面的代码。<form>标签重复。当我移除其中一个时，输入就不起作用了。我很困惑。为什么会这样呢?

Live web: https://cutt.ly/sEUKj5z

在标题中，单击搜索图标。

<form role="search" method="get" class="searchform group"  style="display: none; width:101%!important" action="<?php echo home_url( '/' ); ?>" >
<input type="search" placeholder=" <?php echo esc_attr_x( 'Search', 'placeholder' ) ?>"
value="<?php echo get_search_query() ?>" name="s"
id="search-input"
title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</form>
<style>
.search {display: inline-block} /* prevent 100% width */
.search .fa-search {left: auto; right: 10px;}
</style>
<form role="search" method="get" class="searchform group"  style="display: none; width:101%!important" action="<?php echo home_url( '/' ); ?>" >
<input type="search" placeholder=" <?php echo esc_attr_x( 'Search', 'placeholder' ) ?>"
value="<?php echo get_search_query() ?>" name="s"
id="search-input"
title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</form>
<style>
.search {display: inline-block} /* prevent 100% width */
.search .fa-search {left: auto; right: 10px;}
</style>

Answer 1

我猜by "不起作用"您的意思是在删除第二个表单后看不到输入字段。

原因是导航栏有一个负的上边距，使它向上推，显然是为了隐藏重复的表单，所以当第二个表单被删除时，它覆盖了剩下的一个。

要解决这个问题，转到#sticky-header-navbar > div > nav选择器并删除行margin-top: -45px;。