我无法在下面的摘要中获取输入,以延伸至包含按钮的100%,而无需进行诸如width: 150%
.explore__column,
.explore__row {
display: flex;
}
.explore__row {
flex-direction: row;
flex: 1 1;
}
.search-box__item {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1;
margin-right: 3.75rem!important;
margin-bottom: 3.75rem!important;
width: 0;
border: 1px solid rgba(33, 33, 33, .4);
align-items: center;
border-radius: 5px;
background: transparent;
background: #fff;
cursor: pointer;
}
.search-box__item.search-box__active {
border-top: 2px solid #4f9bc9;
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .12);
}
.search-box__item {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1;
margin-right: 3.75rem!important;
margin-bottom: 3.75rem!important;
width: 0;
border: 1px solid rgba(33, 33, 33, .4);
align-items: center;
border-radius: 5px;
background: transparent;
background: #fff;
cursor: pointer;
}
<div class="explore__row"><button class="search-box__item search-box__active" type="button"><div class="search-box__translate"><svg viewBox="0 0 30 30" style="overflow: visible;"><use xlink:href="#icon-Plan" style="overflow: visible;"></use></svg></div><div class="search-box__fade
"><input type="text" autocomplete="off" class="input__default form-control" placeholder="search Plans"></div><h2>One</h2></button><button class="search-box__item" type="button"><div class="search-box__translate"><svg viewBox="0 0 30 30" style="overflow: visible;"><use xlink:href="#icon-BusinessUnit" style="overflow: visible;"></use></svg></div><div class="search-box__fade"><input type="text" autocomplete="off" class="input__default form-control" placeholder="search Business Units"></div><h2>Two</h2></button>
</div>
- 您不能在按钮元素内使用
<div>
(为什么在这种情况下您要使用按钮?它在单击时会使您的内容摆动( - 只需在输入及其父母中添加100%的宽度,然后添加
box-sizing: border-box
即可考虑填充物。
.explore__column,
.explore__row {
display: flex;
}
.explore__row {
flex-direction: row;
flex: 1 1;
}
.search-box__item {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1;
margin-right: 3.75rem!important;
margin-bottom: 3.75rem!important;
width: 0;
border: 1px solid rgba(33, 33, 33, .4);
align-items: center;
border-radius: 5px;
background: transparent;
background: #fff;
cursor: pointer;
padding: 0 10px;
}
.search-box__item.search-box__active {
border-top: 2px solid #4f9bc9;
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .12);
}
.search-box__item {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1;
margin-right: 3.75rem!important;
margin-bottom: 3.75rem!important;
width: 0;
border: 1px solid rgba(33, 33, 33, .4);
align-items: center;
border-radius: 5px;
background: transparent;
background: #fff;
cursor: pointer;
}
.search-box__fade,
input {
width: 100%;
box-sizing: border-box;
}
<div class="explore__row">
<div class="search-box__item search-box__active" type="button">
<div class="search-box__translate">
<svg viewBox="0 0 30 30" style="overflow: visible;"><use xlink:href="#icon-Plan" style="overflow: visible;"></use></svg>
</div>
<div class="search-box__fade">
<input type="text" autocomplete="off" class="input__default form-control" placeholder="search Plans"></div>
<h2>One</h2>
</div>
<div class="search-box__item" type="button">
<div class="search-box__translate">
<svg viewBox="0 0 30 30" style="overflow: visible;"><use xlink:href="#icon-BusinessUnit" style="overflow: visible;"></use></svg>
</div>
<div class="search-box__fade">
<input type="text" autocomplete="off" class="input__default form-control" placeholder="search Business Units">
</div>
<h2>Two</h2>
</div>
</div>
从您的.search-box__item
元素中删除flex-direction: column
。并添加此代码段:
.search-box__item {
flex-wrap: wrap;
}
.search-box__fade {
width: 100%;
}
input {
width: 100%;
box-sizing: border-box;
}