范围

时间:2016-06-23 01:03:16

标签: css

我已成功对齐输入右侧的按钮。我现在遇到输入无法点击的问题。

我尝试将输入的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>

1 个答案:

答案 0 :(得分:1)

不确定这是否是您需要的?

&#13;
&#13;
.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;
&#13;
&#13;