bootstrap3中的绝对位置元素 - 强制宽度与容器相同

Question

tl; dr - 如何将结果div与输入的宽度相同：http://plnkr.co/edit/44hVxWVZzYY32Fx6dqpp?p=preview

给出以下html：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <input style="width:100%" />
      <div class="results">
        <ul id="search-list">
          <li>Result1</li>
          <li class="selected">Result2</li>
          <li>Result3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

使用CSS：

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.results {
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 255, 255, 0.9);
  width: 100%;
}

#search-list li {
  font-size: 130%;
  padding-left: 15px;
}

结果div比输入宽：

我希望结果是输入的确切宽度。我可以通过从.results元素中删除绝对定位来实现此目的。但是，我需要将结果显示在任何后续内容之上。感谢您的任何建议。

Answer 1

非常简单：

.results {
  position: absolute;
  z-index: 1;
  left:15px;
  right:15px;
}

了解Bootstrap网格，你就会明白，在每个col - * - 类的任何一方都有15px的香草下载。

Answer 2

一种看似简单的方法是将背景移动到li，然后在容器上使用填充。然后，必须更加具体.selected规则。

http://plnkr.co/edit/alLfxA?p=preview

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.results {
  position: absolute;
  z-index: 1;
  width: 100%;
  padding-right: 30px;
}

#search-list li {
  font-size: 130%;
  padding-left: 15px;
  background-color: rgba(0, 255, 255, 0.9);

}

#search-list li.selected {
  background: yellow;
}