Question

我正在研究关于CSS的一些东西，我对此表示怀疑。我在网络上的其他帖子中搜索了此内容，但找不到。

如果我有一些img的高度等于其父级div的80％（其宽度也将相同），如何设置input的宽度以填充在剩余空间中。

该代码段可能类似于以下代码段：

.forms {
    display: block;
    width: 70%;
    height: 36px; /*This height change for different devices*/
    padding: 2px;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    outline: 0;
    font-size: 14px;
    line-height: 30px;
}

#inputSearch {
  position: relative;
  width: 80%;
  display: inline-block;
  border: 0;
  outline: 0;
}

#imgSearch {
  position: relative;
  float: right;
  height: 80%;
  top: 10%;
  right: 6px;
}

<div id="parent" class="forms">
   <input id="inputSearch" type="text">
   <img id="imgSearch" src="https://www.freeiconspng.com/uploads/search-icon-png-21.png">
</div>

就我而言，因为我使用的是项目模式，所以无法更改父div属性（如显示）。父div旁边还有其他元素。因此，我只想更改子级属性。

如果有人指导我，我将不胜感激。

Answer 1

如果我理解正确的问题，这可能是一种可能的解决方案。尝试使用flex属性：

#parent{
display : flex;
//optional alignment
align-items: center;
}
#inputSearch{
flex-grow: 1;
}
#imgSearch{
width: 80%;
height: 80%;
}

是否可以根据父元素的高度设置元素的宽度？这该怎么做？

1 个答案: