代码之家 › 专栏 › 技术社区 › mpen

如何使文本框适合容器但具有最小宽度?

flexbox css3 css

mpen · 技术社区 · 6 年前

.SearchWrap {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
}

.SearchInput {
  margin-bottom: 2px;
  border: 1px solid #b8b8b8;
  padding: 2px 20px 2px 4px;
  min-width: 100px;
  outline: none;
}

.StyledSearchIcon {
  height: .9em;
  position: absolute;
  right: 4px;
  fill: #808080;
  pointer-events: none;
}

.Container {
  background-color: yellow;
  position: absolute;
}

<div class="Container">
  <div class="SearchWrap">
    <input aria-autocomplete="list" aria-controls="downshift-0-menu" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" placeholder="Filter..." class="SearchInput" value="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="StyledSearchIcon"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
  </div>
  <p>xxxx</p>
</div>

<input> 渲染为176像素宽,但我只希望它是100像素宽(最小宽度)。 然而,

我该怎么做?

width: auto 以及各种价值观 flex 但我不能让它按我想要的方式去做。

注意,我不知道 .Container .

1 回复 | 直到 6 年前

Temani Afif 6 年前

你可以试试这个:

.Container {
  display: inline-flex;
  flex-direction:column;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  background-color: yellow;
}

.SearchInput {
  margin-bottom: 2px;
  border: 1px solid #b8b8b8;
  padding: 2px 20px 2px 4px;
  width: 100px;
  box-sizing:border-box;
  min-width:100%;
  outline: none;
}

.StyledSearchIcon {
  height: .9em;
  position: absolute;
  right: 4px;
  top:4px;
  fill: #808080;
  pointer-events: none;
}

<div class="Container">
    <input aria-autocomplete="list" aria-controls="downshift-0-menu" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" placeholder="Filter..." class="SearchInput" value="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="StyledSearchIcon"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
  <p>xxxx</p>
</div>

<div class="Container">
    <input aria-autocomplete="list" aria-controls="downshift-0-menu" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" placeholder="Filter..." class="SearchInput" value="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="StyledSearchIcon"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
  <p>xxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

如果你需要保留最初的HTML,你可以做几乎相同的事情,但是你需要添加 width:100% 搜索包装:

.SearchWrap {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  width:100%; /*Don't forget this*/
}

.SearchInput {
  margin-bottom: 2px;
  border: 1px solid #b8b8b8;
  padding: 2px 20px 2px 4px;
  width: 100px;
  min-width:100%;
  box-sizing:border-box;
  outline: none;
}

.StyledSearchIcon {
  height: .9em;
  position: absolute;
  right: 4px;
  fill: #808080;
  pointer-events: none;
}

.Container {
  background-color: yellow;
  display:inline-block;
}

<div class="Container">
  <div class="SearchWrap">
    <input aria-autocomplete="list" aria-controls="downshift-0-menu" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" placeholder="Filter..." class="SearchInput" value="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="StyledSearchIcon"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
  </div>
  <p>xxxx</p>
</div>

<div class="Container">
  <div class="SearchWrap">
    <input aria-autocomplete="list" aria-controls="downshift-0-menu" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" placeholder="Filter..." class="SearchInput" value="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="StyledSearchIcon"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
  </div>
  <p>xxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>