CSS：如何使输入框中的下拉列表与长文本不重叠？

Question

我的输入框中有一个下拉菜单。当文本变得很长时，文本和下拉重叠。使用css，我怎样才能确保无论文本有多长，下拉和文本都不会重叠？

当前输出：

期望的输出：

输入框的HTML和css：

下拉列表的HTML和CSS：

Answer 1

由于我们不知道您的代码结构，这仍然是一种猜测，但大多数情况下您可以通过将padding-right值设置为略高于下拉列表的宽度来实现此目的：

JS Fiddle

.input-field {
  padding: 5px;
  padding-right:100px; /* something like this */
  font-size: 1em;
  width: 300px;
}
.input-select{
  height:29px; color:skyblue; font-weight:bold; border:none; outline:none;
  margin-left:-95px;
}

<input type="text" class="input-field" placeholder="input text">
<select class="input-select">
  <option value="">Google</option>
  <option value="">Yahoo</option>
  <option value="">Bing</option>
  <option value="">Wikipedia</option>
</select>

Answer 2

将此添加到您的css：

#can_edit {background-color: white;}

Answer 3

form{
  width: 50%;
  margin: 10px auto;
}
.parent{
  overflow: hidden;
}
input{
  width: 100%;
}
select{
  padding: 1px;
  float: right;
}

<form>
  <select>
    <option>value 1</option>
    <option>value 2</option>
  </select>
  <div class="parent">
    <input type="text">
  </div>
</form>