根据另一个选择器宽度动态地增加和减少输入文本框的大小
[英]Dynamically increase and decrease an input text box size depending on another selector width
问题描述
I have an input text box which has some padding to it. 
我有一个input text box ，其中有一些填充。 I also have a wrapper class selector which is used next to that input text box . 我还有一个wrapper类选择器，该选择器用于该input text box旁边。 I am trying to remove set padding from the input text box and make that space dynamic so that the element size would (especially width) increase and decrease depending on the screen size (ie Mobile or Large view as large screen) without effecting the wrapper . 我试图从输入文本框中删除set padding ，并使该空间动态化，以便元素大小（尤其是宽度）根据screen size （即“移动”或大视图作为大屏幕）增加和减少而不会影响wrapper 。
The text box looks like the following. 文本框如下所示。 a, c, d, e are buttons which appear dynamically. a，c，d，e是动态显示的按钮。 So the space for b here should expand if the there is only one button on the right and decrease if there are all the buttons on the right. 因此，如果右边只有一个按钮，则b的空间应扩大；如果右边有所有按钮，则b的空间应减少。
|____|________________________ |_____|_____|_____| | ____ | ________________________ | _____ | _____ | _____ |
abcde
so the css class selectors that I have includes b and another one includes all the c, d, e (wrapper). 所以我拥有的css类选择器包括b，另一个包括所有c，d，e（包装器）。
I assume this can't only be done through CSS . 我认为这不仅可以通过CSS完成。 Any suggestion? 有什么建议吗？
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 HTML
<div>
<input class="input">
<div class= "wrapper">
<button>c</button>
<button>d</button>
<button>e</button>
</div>
</div>
3 个解决方案
解决方案1
0 2018-10-09 12:28:57
Lets say you have div child blocks for those child elements or you can specify some class. 假设您为那些子元素设置了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
Source refer to here 来源参考这里
Also if you want to modify other elements you can use 另外，如果您想修改其他元素，则可以使用
div:first-child:nth-last-child(2) > .someClass{
style:goesHere
}
解决方案2
0 2018-10-09 13:00:33
( UPDATE : I figured out you used a wrapper element, and that a is'nt a label but a button. But this answer is easily adaptable to your question.) （ 更新 ：我发现您使用了包装元素，并且a不是标签而是按钮。但是，此答案很容易适应您的问题。）
You can use the calc function provided by CSS. 您可以使用CSS提供的calc函数。 Given this piece of HTML (I joined all the elements to remove side effects of the blank characters; we can fix it in an other way but I wanted to keep the answer simple): 有了这段HTML（我加入了所有元素以消除空白字符的副作用；我们可以用其他方式修复它，但我想使答案保持简单）：
<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>
This piece of CSS allow the input text element to fill the available space. 这段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);
}
You can set the width of article#demo using any unit ( em , ex , etc.) it should work. 您可以使用应该工作的任何单位（ em ， ex等）来设置article#demo的宽度。
In your final design, use box-sizing:border-box to set the whole element, including borders and padding, within the CSS width . 在最终设计中，使用box-sizing:border-box在CSS width内设置整个元素，包括边框和填充。 Otherwise, you'll have to adjust the calc parameter. 否则，您将不得不调整calc参数。
If you put left or right margins, count them too. 如果您放置左边缘或右边缘，也要数一下。
If you use font-dependent units ( em , etc.), the same font-family and other font-related CSS entries have to be set - implicitly or not - for all the concerned elements. 如果使用字体相关的单位（ em等），则必须为所有相关元素设置相同的font-family和其他与字体相关的CSS条目（隐式或不隐式）。
Working fiddle with a little interactive test here . 在这里进行一些交互式测试，使工作变得很轻松。
解决方案3
0 已采纳 2018-10-17 11:31:04
The solution only needed to count the width of the input text box and the wrapper and assign the difference as a padding to the right of the input text box. 该解决方案仅需要计算input text box和wrapper的width ，并将差异作为填充wrapper分配到input文本框的右侧。 The following little change was added to an onInput event. 以下小的更改已添加到onInput事件中。
document.getElemendById("inputTextBox").style.paddingRight = document.getElemendById("searchFieldWrapper").clientWidth;
And also needed to use Media Queries for @media (--large-viewport) / @media (--medium-viewport) to assign different padding for the input . 并且还需要对@media (--large-viewport) / @media (--medium-viewport)使用Media Queries来为input分配不同的padding 。 as @Scott Marcus mentioned in a comment. 就像@Scott Marcus在评论中提到的那样。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.