Question

我只想使用CSS和html来保持img元素和input元素的高度。任何指导将不胜感激，我对这些事情还很陌生。这是代码的某些部分

<!-- Main section of the html part--> 
<main>
 <!-- Division with Search Bar as an input element and the svg as an image--> 
            <div class="searchDiv">
                <!-- A label --> 

                  <label class="searchBar" id="search">Taste of home right at your finger tips <br>   </label>
                 <!-- Search Bar --> 
                  <input type="text" id="searchBar1" class="searchBar">

                 <!-- SVG image--> 
                  <img id="searchBtn" src="css/SVGS/magnifying-glass.svg"> 

             </div>

        </main>

我也尝试过<object>标签，但是它不起作用。这是CSS部分

    #searchBar1 {

    float:left;

    box-sizing: border-box;
    margin: 4% auto auto 26%;
    padding:0.99% 22% 0.4%  1%;

    border: solid thin rgba(74, 87, 98, 0.61);
    border:none;
    border-right:none;

    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);


}

@media screen and (min-width: 1200px) {
  #searchBar1 {
      margin: 4% auto auto 31%;
  }
}


#searchBtn {
    width: 3.45%;
    margin-bottom: 0.2%;
   float:left;
    border: none;
    box-sizing: border-box;
    background-color: white;
    margin-top: 4%;
    padding: 1% 1% 1.1% 1%;



    border-left:dashed thin rgba(74, 87, 98, 0.61);
     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);

}

Answer 1

问题在于您的填充和边距，删除它们并编写高度和宽度值应该可以解决。这是我的代码（我还纠正了html注释中的注释，而不是<-comment-！>）

<style>
#searchBar1 {
    width: 3.45%;
    height: 3.45%;
    float:left;


    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);


}



#searchBtn {
    height: 3.45%;
    width: 3.45%;
    float:left;
    border: none;
    background-color: white;

}
</style>
<main>
 <!-- Division with Search Bar as an input element and the svg as an image--> 
            <div class="searchDiv">
                <!-- A label --> 

                  <label class="searchBar" id="search">Taste of home right at your finger tips <br>   </label>
                 <!-- Search Bar --> 
                  <input type="text" id="searchBar1" class="searchBar">

                 <!-- SVG image--> 
                  <img id="searchBtn" src="css/SVGS/magnifying-glass.svg"> 

             </div>

        </main>

我很高兴看到社区的新成员

Answer 2

plz试试这个

html注释中的注释由像这样

<!DOCTYPE html>
<html>

<style>

 
<main>
 <-- Division with Search Bar as an input element and the svg as an image--!> 
            <div class="searchDiv">
                <-- A label --!> 

                  <label class="searchBar" id="search">Taste of home right at your finger tips <br>   </label>
                 <-- Search Bar --!> 
                  <input type="text" id="searchBar1" class="searchBar">

                 <-- SVG image--!> 
                  <img id="searchBtn" src="css/SVGS/magnifying-glass.svg"> 

             </div>

        </main>
I have tried <object> tag too but it won't work. Here is the CSS part


@media screen and (min-width: 1200px) {
  #searchBar1 {
     /*argin: 4% auto auto 31%;*/
  }
}
#searchBtn:hover{
background-color:blue;
box-shadow: 0 1px 3px 0 black;
}

#searchBtn {
position:fixed;
width:20px;
height:20px;
float:left;
border: none;
box-sizing: border-box;
background-color: white;
border:solid thin rgba(74, 87, 98, 0.61);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);

}
.a{
border-radius:120px;}

</style>
<body>




       <div class="searchDiv">
              

                  <label class="searchBar" id="search">Taste of                     home right at your finger tips <br>   </label>
              
            
                  <input type="text" id="searchBar1" class="a"                         placeholder="  search" />

     
<img id="searchBtn" src=https://images.pexels.com/photos/313715/pexels-photo-313715.jpeg?cs=srgb&dl=alcohol-bar-blur-313715.jpg&fm=jpg"> 

             </div>

</body>
</html>

如何在两个不同的HTML元素之间保持高度和宽度？

2 个答案: