时间戳

首页 > 解决方案 > 搜索栏宽度不适应窗口大小

html - 搜索栏宽度不适应窗口大小

问题描述

我正在尝试有一个适合我的窗口大小的搜索栏，我尝试过 flex-grow 但它没有改变任何东西我的栏仍然是相同的宽度。

另外，我还有第二个问题，因为我对 Web 开发很陌生。我遇到了一个像 Frontend Mentor 这样的网站，它可以为您提供很好的项目，但我对样式表有疑问。例如，他们要求字体大小为 15px，但当我在样式表上将其设为 15px 时，它太大了，看起来不像它应该的样子。

.container {
  display: inline-block;
  position: absolute;
  vertical-align: middle;
  flex-grow: 1;
  left: 100px;
}

.box {
  display: inline-block;
  width: 250px;
  height: 9px;
  border: 0.5px solid #d9d9d9;
  border-top: 0.5px solid #c0c0c0;
  border-radius: 0.5px;
  outline: none;
  font-size: 7px;
}

.box:focus {
  border-color: blue;
  box-shadow: inset 0 0.5px 0 0 rgba(33, 33, 33, 0.2);
}
<form action="https://google.com/search" class="container">
  <input class="box" type="text" name="as_q">
</form>

标签： htmlcss

解决方案

flex-grow适用于弹性项目。“容器”不是弹性项目，因此flex-grow不会对其产生影响。你必须设置

.container{
    display:flex
}

现在“容器”的孩子将是“弹性”项目。您将“flex-grow”应用于孩子。

.box{
  flex-grow:1
}

“flex-grow”值是增长率。由于您只有一个孩子，它将占用剩余的可用空间。如果你有 2 个孩子，第一个有“flex-grow:1”，第二个有“flex-grow:2”，第二个孩子将占据第一个孩子的两倍大小。

对于您的第二个问题，请创建另一个问题并详细解释，包括所有代码。每个问题应该只关注一个问题。

推荐阅读