簡體 English 中英

對齊兩個按鈕和占位符查詢之間的空間

[英]aligning space between two buttons and placeholder query

原文 2022-08-16 17:36:35 7 0 html/ css/ button/ placeholder

我有兩個疑問。 第一個在頂部添加了兩個按鈕。 如何對齊兩個按鈕之間的空間？ 其次，我添加了一個文本框並將占位符作為搜索。 但在 output 瀏覽器中顯示最后一個字母“h”。我在下面添加了一個 output 圖像。 我是 html 和 css 的初學者。 真誠的幫助將不勝感激。 [！[

 *{ padding: 0px; margin: 0px; } header{ background-color: black; height: 100px; }.menu{ display: flex; flex-direction: row; justify-content: space-between; padding: 40px; color: #fff; }.menu ul { list-style: none; display: flex; margin-left: 180px; }.menu ul li a{ color: white; text-decoration: none; margin: 20px; font-size: 24px; }.btn{ margin-right: 250px; }.btn1 { background-color: #4C5FD5; width: 90px; height: 50px; border: 1px solid #fff; border-radius: 7px; color: #fff; font-size: 17px; font-weight: 600; box-shadow: none; }.btn1:hover{ background-color: #fff; color: black; transition: 0.3s ease; cursor: pointer; }.herosec{ text-align: center; }.content{ background-color: #dadbf1; height: 400px; }.content h1{ padding-top: 80px; font-size: 80px; padding-bottom: 40px; }.content input{ width: 450px; height: 40px; font-size: 20px; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style?css"> </head> <body> <header> <div class="menu"> <ul> <li><a href="#">Abstract</a></li> <li><a href="#">Help center</a></li> </ul> <div class="btn"> <button class="btn1">Submit</button> <button class="btn1">Signin</button> </div> </div> </header> <hero class="herosec"> <div class="content"> <h1>How can we help?</h1> <input type="text" placeholder="search"> </div> </hero> </body> </html>

] 1 ] 1