對齊文本和搜索框的頁面中，同時消除搜索按鈕

我想對齊到頁面中央，標題（頂部）並在搜索框下方（標題下方），可能沒有搜索按鈕。

現在，我有兩個問題。

第一個，在搜索框中不對齊到中心。

第二個，如果我消除搜索按鈕，查詢不我按一下回車鍵後工作。

我該如何實現這兩個挑戰？

非常感謝您的幫助。

下面是我的代碼：

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

差不多完成了，這是我的代碼現在。它可以工作，但按下回車鍵後查詢仍然無效。

這又是我的代碼與建議的修改：

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

託尼非常感謝你，差不多完成了。問題，我在哪裏插入你放的第一個報價塊？對不起，我真的沒有任何經驗。 –

謝謝託尼，我能夠將第一塊代碼插入到正確的位置。現在剩下的唯一問題是查詢，當我按下鍵盤上的Enter按鈕時仍然不起作用。它沒有連接到我的數據庫。 –

完成我修好了。非常感謝Tony –

對齊文本和搜索框的頁面中，同時消除搜索按鈕

回答

相關問題