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

【问题标题】：How to maintain height and width between two different HTML elements?如何保持两个不同 HTML 元素之间的高度和宽度？
【发布时间】：2018-11-10 18:07:06
【问题描述】：

我想只使用 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);

}

【问题讨论】：

标签： html css responsive-design responsive-images

【解决方案1】：

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

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

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

【讨论】：

谢谢，但是这不起作用，我已经尝试过了。我只是通过填充尝试反复试验，但没有运气
这很奇怪。我发送给您的代码导致输入和图像大小相同，至少对我而言。你测试过我的代码吗？你用的是什么浏览器？
我正在使用 Chrome 和括号。高度和宽度不会同步。我遇到的主要问题是元素的高度。
不，它没有
这很奇怪，对我来说很完美。很抱歉没有早点回答/帮助，我正在帮助另一个人，已经深夜了......祝你的项目好运;）

【解决方案2】：

请试试这个

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>

【讨论】：