Question

大家好，周五开心，

我想对齐页面的中心，标题（顶部）和搜索框正下方（标题下方），可能没有搜索按钮。

现在，我有两个问题。

第一个，搜索框未与中心对齐。

第二个，如果我取消了搜索按钮，则在按Return键后查询不起作用。

我如何实现这两项挑战？

非常感谢您的帮助。

以下是我的代码：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>CLIHELP - Help for Command Line Interface</title>
  <meta name="description" content="Help for Command Line Interface">
  <meta name="author" content="clihelp.org">

  <style>

    .site-title {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-180px; 
    margin-left:-280px;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26px;
    }

    .search {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;  
    margin-left:-100px;
    }

    .search input {
        height: 40px;
        width: 487px;
    }

  </style>

</head>
<body>
    <div class="site-title">
        <h1>CLIHELP - Help for Command Line Interface</h1>
    </div>
    <div class="search">
        <form action='q.php' method='GET'>
            <input type='text' size='25' name='search'>
            <input type='submit' name='submit' value='Search' >
        </form>
    </div>
</body>
</html>

差不多完成了，现在这是我的代码。它工作正常，但按Enter键后查询仍无效。

这又是我的代码，其中包含建议的修改：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>CLIHELP - Help for Command Line Interface</title>
  <meta name="description" content="Help for Command Line Interface">
  <meta name="author" content="clihelp.org">

  <style>

    .content {
    text-align: center;
    padding-top: 50px;
    }

    .site-title h1 {
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        font-size: 15px;
        font-style: normal;
        font-variant: normal;
        font-weight: 500;
        line-height: 26px;
        }

    .search {
        display: inline-block;
        width: 487px;
    }

    .search input {
        height: 40px;
        width: 100%;
    }

  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    $(document).ready(function() {
    $('.submit_on_enter').keydown(function(event) {
        if (event.keyCode == 13) {
        this.form.submit();
        return false;
        }
    });
    });

  </script>
</head>
<body>

    <div class="content">
        <div class="site-title">
            <h1>CLIHELP - Help for Command Line Interface</h1>
        </div>
        <div class="search">
            <form action='q.php' method='GET'>
            <input type='text' size='25' class="submit_on_enter" name='search'>
        </form>
    </div>
</div>
</body>
</html>

Answer 1

以下是一个可能对您有用的示例：

＆＃13;

$(document).ready(function() {
  $('.submit_on_enter').keydown(function(event) {
    if (event.keyCode == 13) {
      this.form.submit();
      return false;
    }
  });
});

＆＃13;

 .content {
   text-align: center;
   padding-top: 50px;
 }
 
 .site-title h1 {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26px;
    }

 .search {
    display: inline-block;
    width: 487px;
 }

.search input {
    height: 40px;
    width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
   <div class="site-title">
        <h1>CLIHELP - Help for Command Line Interface</h1>
    </div>
    <div class="search">
        <form action='q.php' method='GET'>
            <input type='text' size='25' class="submit_on_enter" name='search'>
        </form>
    </div>
</div>

＆＃13;

如果没有＆＃39;有很多替代方法可以发送表单。提交按钮。我在这里选择的那个来自Submitting a form by pressing enter without a submit button。您可以在那里查看更多选项和详细信息。

此外，您可能想要查看类似bootstrap及其模板的内容。为此，可以很容易地修改https://getbootstrap.com/examples/signin/。

对齐页面中间的文本和搜索框，同时消除搜索按钮

1 个答案: