我已成功对齐输入右侧的按钮。我现在遇到输入无法点击的问题。
我尝试将输入的z-index设置为高数字。
任何人都可以帮忙找出输入无法点击的原因吗?
.input-add {
position: relative;
display: inline;
}
.input-add > input {
width: 90%;
float: left;
}
input-add .audio-input-group {
position: relative;
font-size: 0;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
background-color: #ccc;
height: 34px;
}
<div class="input-add">
<input value="Test" type="text" class="form-control" placeholder="Main Artist">
<span class="audio-input-group">
<button class="btn-icon icon audio-icon-add" style="height:40px;"></button>
</span>
</div>
答案 0 :(得分:1)
不确定这是否是您需要的?
.input-add {
height: 40px;
}
.input-add > input {
width: calc(100% - 55px);
height: 100%;
float: left;
margin: 0px;
}
.input-add .audio-input-group {
font-size: 0;
background-color: #ccc;
}
.input-add .audio-input-group > button.btn-icon {
height: 100%;
width: 50px;
margin: 0px;
}
&#13;
<div class="input-add">
<input value="Test" type="text" class="form-control" placeholder="Main Artist">
<span class="audio-input-group">
<button class="btn-icon icon audio-icon-add">Test</button>
</span>
</div>
&#13;