揃えテキストや検索ボックスは、検索ボタンを排除

みなさん、こんにちは、幸せな金曜日、揃えテキストや検索ボックスは、検索ボタンを排除

私はページの中央に揃えたい

、タイトル（トップ）サーチボックスの下に（タイトルの下に）、おそらく検索ボタンがありません。

今は2つの問題があります。

最初のものは、検索ボックスが中央に揃っていません。

検索ボタンを削除した場合、Returnキーを押すとクエリが機能しません。

どのようにこれらの2つの課題を達成できますか？

ご協力いただきありがとうございます。

以下は私のコードです：

<!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>

出典

2016-11-26 Fabio Viola

はそれがあなたのために働くかもしれない方法の例です。

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

.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%; 
 
}

<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>

多くの選択肢があります。送信ボタンを使用せずにフォームを送信する方法。私がここで選んだのはSubmitting a form by pressing enter without a submit buttonです。あなたはそこにもっと多くのオプションと詳細を見ることができます。

また、ブートストラップやテンプレートのようなものをチェックアウトすることもできます。この目的のために、これは簡単に変更することができますhttps://getbootstrap.com/examples/signin/。

出典

2016-11-26 01:45:01

トニーお世話になりました。質問、あなたは入れた最初の引用ブロックをどこに挿入しますか？申し訳ありませんが、私は本当に経験がありません。 –

Tonyさん、ありがとうございました。正しい場所にコードの最初のブロックを挿入することができました。残った唯一の問題はクエリですが、キーボードのEnterボタンを押してもまだ動作しません。私のDBに接続しません。 –

完了しました。そんなにトニーをありがとう –

揃えテキストや検索ボックスは、検索ボタンを排除

答えて

関連する問題