时间戳

首页 > 解决方案 > 如何保持两个不同 HTML 元素之间的高度和宽度？

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

问题描述

我想用仅使用 CSS 和 htmlimg的元素来保持元素的高度。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);

}

标签： htmlcssresponsive-designresponsive-images

解决方案

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

<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>

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

推荐阅读