Question

我正在尝试将搜索栏放在中心位置，以便当人们缩小它时不会转到页面左侧而是将其自身调整到中心位置，我尝试在表单之前添加<center>并且它不会工作。我能做什么，搜索表格总是在中心？

<div class="Nav">
   <a href="../index"><img src="/img/putlockermedia_logo.png" /></a>
   <form action='/search.php' method='GET'> <!-- start of search bar -->
        <input id='searchbar' type='text' name='search' placeholder="search for movies & tv shows" maxlength="50" required />
        <input id='submit' type='submit' name='submit' value='Search' disabled />
   </form>
   <script>
      document.getElementById('searchbar').oninput = function() {
      document.getElementById('submit').disabled = !this.value.trim();
   }
   </script> <!-- end of search bar -->
   <div class="Navbuttons">
     <a href="../shows"><input type="button" name="button" id="button" value="shows" /></a>
     <a href="../movies"><input type="button" name="button" id="button" value="movies" /></a>
   </div>
</div>

css：

<style>

.nav
{
    width:100%;
    background: #999;
    height: 40px;
    position: fixed;
    top: 0px;
    min-width: 960px;
    right: 0px;
    left: 0px;
    top: 0px;
}
</style>

Answer 1

您没有在代码中的任何class =属性中使用nav 除了记住这些细节，请尝试以下方法：

<div class="myCenter">
    <form action='/search.php' method='GET'> <!-- start of search bar -->
        <input id='searchbar' type='text' name='search' placeholder="search for movies & tv shows" maxlength="50" required />
        <input id='submit' type='submit' name='submit' value='Search' disabled />
    </form>
</div>

Spoiler：将带有新类的包装div添加到表单标记中上课：

div.myCenter { text-align: center }
div.myCenter form { text-align: left } //optional, if you don't want to see your elements as centered

＆LT;中心]，[标签被弃用，就像上帝一样。

如何集中这个搜索表单？

1 个答案: