Question

我有一个input text box，上面有一些填充。我还有一个wrapper类选择器，该选择器在该input text box旁边使用。我正在尝试从输入文本框中删除set padding，并动态调整该空间，以便元素大小（尤其是宽度）根据screen size（例如，移动设备或大视图作为大屏幕）而不会影响wrapper。

文本框如下所示。 a，c，d，e是动态显示的按钮。因此，如果右侧只有一个按钮，则 b 的空间应扩大，如果右侧有所有按钮，则空间应减小。

| ____ | ________________________ | _____ | _____ | _____ |

a b c d e

所以我拥有的css类选择器包括b，另一个包括所有c，d，e（包装器）。

我认为这不能仅通过CSS完成。有什么建议吗？

CSS：

 .input {
  position: relative;
  width: 100%;
  max-width: var(--grid-main-max-width);
  padding: 1.188rem 2.9rem 1.188rem 4.5rem;
  margin: 0;
  font-size: 16px;
  border: 1px solid var(--color-gray);
  border-radius: 0.375rem;
  outline: 0;
  }


.wrapper {
position: absolute;
top: 0;
right: 1.5rem;
bottom: 0;
display: flex;
justify-content: center;
}

HTML

<div>
<input class="input">
  <div class= "wrapper">
  <button>c</button>
  <button>d</button>
  <button>e</button>
 </div>
</div>

Answer 1

可以说您有div个用于这些子元素的子块，或者您可以指定一些类。

div:first-child:nth-last-child(1){
    width: 100%;
}

div:first-child:nth-last-child(2),
div:first-child:nth-last-child(2) ~ div{
    width: 50%;
}

div:first-child:nth-last-child(3),
div:first-child:nth-last-child(3) ~ div{
    width: 33.3%;
}

div:first-child:nth-last-child(4), 
div:first-child:nth-last-child(4) ~ div{
    width: 25%;
}
//and so on

来源refer to here

如果您要修改其他元素，也可以使用

div:first-child:nth-last-child(2) > .someClass{
    style:goesHere
}

Answer 2

（更新：我发现您使用了包装元素，并且a不是标签而是按钮。但是，此答案很容易适应您的问题。）

您可以使用CSS提供的calc函数。有了这段HTML（我加入了所有元素以消除空白字符的副作用；我们可以在other way中对其进行修复，但我想保持答案简单）：

<html>
  <head>
  </head>
  <body>
    <article id="demo">
      <label>a</label><input type="text" placeholder="b" /><button>c</button><button>d</button><button>e</button>
    </article>
  </body>
</html>

这段CSS允许输入文本元素填充可用空间。

article#demo {
  /* the width (80vw) includes border and padding */
  width: 80vw;
}

article#demo label {
  /* to make label resizable */
  display: inline-block;
  width: 30px;
}

article#demo button {
  width: 20px;
  margin: 0;
  padding: 0;
  background-color: #f0f0ff;
  box-sizing: border-box;
  /* see above */
}

article#demo input[type="text"] {
  box-sizing: border-box;
  /* text input width = 100% minus other items */
  width: calc(100% - 30px - 3 * 20px);
}

您可以使用应该起作用的任何单位（article#demo，em等）来设置ex的宽度。

在最终设计中，使用box-sizing:border-box在CSS width中设置整个元素，包括边框和填充。否则，您将不得不调整calc参数。

如果您放置左边距或右边距，也要计算它们。

如果使用字体相关的单位（em等），则必须为所有相关元素隐式设置或不隐式设置相同的font-family和其他字体相关的CSS条目。

通过一些交互式测试here来摆弄。

Answer 3

该解决方案仅需要计算width input和text box中的wrapper并将差值作为填充物分配到{{1}的右侧} 文本框。以下少量更改已添加到input事件中。

onInput

并且还需要对document.getElemendById("inputTextBox").style.paddingRight = document.getElemendById("searchFieldWrapper").clientWidth; / Media Queries使用@media (--large-viewport)为@media (--medium-viewport)分配不同的padding。就像@Scott Marcus在评论中提到的那样。

根据另一个选择器宽度动态地增加和减少输入文本框的大小

3 个答案: