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

Question

我想保持我的 img 的高度元素与 input仅使用 CSS 和 html 的元素。任何指导将不胜感激我对这些东西很陌生。 以下是部分代码

<!-- 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 comments are 中的评论，而不是 <-- 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>

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