css HTML中的搜索栏和按钮

我目前正在使用PHP、HTML和无类CSS（Water.css）制作一个网站。现在，我在将搜索栏和按钮对齐到一行时遇到了问题

<!-- Search Bar Name-->
    <form action="search.php" method="GET">
        <input type="text" name="query" placeholder="Search Equipment">
        <input type="submit" value="Go">
    </form>

<!-- Search Bar Price-->
    <form action="searchprice.php" method="post">
        <label for="min_price">Minimum price:</label>
        <input type="text" name="min_price" id="min_price">
        <label for="max_price">Maximum price:</label>
        <input type="text" name="max_price" id="max_price">
        <input type="submit" name="submit" value="Search">
    </form>

    <button onclick="window.location='add_equipment.php'">Add Equipment</a></button>

搜索栏和按钮工作得非常好，但是我不知道为什么它像一列而不是一行一样堆叠起来。
如果有人能帮我的话就太好了，我是一个HTML新手

不确定这是否是您正在寻找的：就像Amir说的，很多关于在CSS中使用div，flex，Grid的信息。我觉得无类链接让你的输入每次我链接到它，它都把所有的东西放在列中。

<!DOCTYPE html>
<html>
 
<head>
    <title>Equipments</title>
    <meta charset="utf-8">
    <link rel="stylesheet" a href="./css/main.css">
    
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"> -->
</head>
 
<body>
<div class="nav">
    <h2>List Of Equipments</h2>
    
    <div class="navs">
        <!-- Search Bar Name-->
            <form action="search.php" method="GET">
                <label for="Search">Search Equipment</label>
                <input type="text" name="query" placeholder="Search Equipment"><br>
                <input id="Sbutton" type="submit" value="Go">
    
            </form>       
    </div>
    
           
        
        <!-- Search Bar Price-->
    <div class="navs">
            <form action="searchprice.php" method="post">
                <label for="min_price">Minimum price:</label>
                <input type="text" name="min_price" id="min_price"><br>
                <label for="max_price">Maximum price:</label>
                <input type="text" name="max_price" id="max_price"><br>
                <input id="Sbutton2" type="submit" name="submit" value="Search">
                <button id="Sbutton3" onclick="window.location='add_equipment.php'">Add Equipment</button>
            </form>

            </div>
    
    
            
</div>
</body>
</html>

这是CSS，当我设计样式时，我喜欢改变每个div类的背景，这样我就可以在改变代码时看到发生了什么。

.nav{
  display: flex;
  flex-direction: column;
  margin: 10px;
  margin-left: 15%;
  margin-right: 15%;
  padding-bottom: 20px;
  background-color: rgb(77, 76, 76);
}
h2{
  text-align: center;
  font-size: 24px;
  font-weight:bolder;
}
.navs {
    width: 50%;
    background-color: rgb(108, 109, 109);
    height: 150px;
    text-align: center;
    margin-left: 25%;
    margin-top: 20px;
    padding-top:  10px;
   }
  
  #Sbutton{
    font-size: 16px;
    height: 150%;
    width: 15%;
    margin-left:  15%;
    margin-top: 10px;
    
  }
  #Sbutton2{
    font-size: 16px;
    height: 150%;
    width: 15%;
    margin-left:  15%;
    margin-top: 10px;
    
  }
  #Sbutton3{
    font-size: 16px;
    height: 150%;
    width: 25%;
    margin-top: 10px;
    
    
  }
 

  table{
    border:3px solid gray;
    border-collapse: collapse;
}
th{
    border: 2px solid gray;
    padding: 6px;
}
td{
    border: 2px solid gray;
    text-align: center;
}

希望这个有用。

css HTML中的搜索栏和按钮

1条答案

相关问题

热门标签

最新问答