如何使用 CSS 将搜索栏旁边的“搜索按钮”居中？

问题描述 投票：0回答：1

我正在学习编程（网络开发），我昨天开始，我想专门将“搜索按钮”next放在搜索栏的中心，但由于某种原因它似乎不起作用，你可以帮忙吗请问我吗？

这是问题的图像，位于我的代码行下方。 enter image description here

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best Cookies: Buy the best chocolate cookies!</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <!--This is the website header-->
    <h1 id="Cookieland">Cookieland</h1>
    <div>
        <form action="#">
            <input type="text" class="search-input" placeholder="Search Cookies">
            <button type="submit" class="search-button">Search</button>
        </form>
    </div>
</body>
</html>

CSS

h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    text-align: center;
    background-color: wheat;
    height: 70px;
    padding: 0px;
    margin: auto;
}
body {
    background-color:black;
}
/* Styling for the search container */
.search-container {
    text-align: center;
    margin-top: 20px;
}
/* Styling for the search input */
.search-input {
    padding: 10px;
    border-radius: 20px;
    border: 2px solid #ccc;
    width: 400px;
    margin: auto;
    display: block;
}
/* Styling for the search button */
.search-button {
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: auto;
    display: block;
}
/* Styling for the search button on hover */
.search-button:hover {
    background-color: #e0e0e0;
}
html css searchbar
1个回答
0
投票

我检查了你的代码，看来你已经应用了 display: block;搜索输入和搜索按钮的属性，这导致它们彼此堆叠，占据容器的整个宽度。要将它们水平居中并彼此相邻，您需要将它们包装在容器中并应用适当的 CSS。就像，我们不需要设置 margin: auto，因为我们希望搜索输入和搜索按钮彼此相邻显示，所以我们不需要使用它们水平居中。代码可能如下所示，

h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    text-align: center;
    background-color: wheat;
    height: 70px;
    padding: 0px;
    margin: auto;
}
body {
    background-color: black;
}
/* Styling for the search container */
.search-container {
    text-align: center;
    margin-top: 20px;
}
/* Styling for the search input */
.search-input {
    padding: 10px;
    border-radius: 20px;
    border: 2px solid #ccc;
    width: 400px;
}
/* Styling for the search button */
.search-button {
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s;
}
/* Styling for the search button on hover */
.search-button:hover {
    background-color: #e0e0e0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best Cookies: Buy the best chocolate cookies!</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <!--This is the website header-->
    <h1 id="Cookieland">Cookieland</h1>
    <div class="search-container">
        <form action="#">
            <input type="text" class="search-input" placeholder="Search Cookies">
            <button type="submit" class="search-button">Search</button>
        </form>
    </div>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.