Question

我正在尝试创建一个搜索栏，其结果显示在栏下方，但我在尝试实现此问题时遇到了许多问题。我是网络编程的新手，这就是为什么我更喜欢使用bootstrap，因为它兼容不同的屏幕尺寸。在这种情况下，我不知道使用哪种方法，我只是在栏下创建“div”，但我不确定它是否是正确的方法。如果你给我建议，会很高兴。

下面我包含了我用过的css代码。我给出了宽度为174px的硬编码值，而我需要一些自动的东西标识搜索栏的宽度并将该值设置为最大值。 ID="searchResults"是我使用jQuery和Ajax实时获得的字符串。

如果您就如何实施此方法提供建议，我们将非常高兴。

 <div class="navbar-form navbar-left">
       <input class="form-control" placeholder="Search..." type="text"
       autocomplete = off  id = "autocomplete_search">
      <div  id="searchResults" 
            style="position: absolute;
                width: 174px;
                background: white;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                max-height: 200px;
                overflow-y: auto;
                margin-top: -3px;"> </div>
 </div>

Answer 1

你的尝试还可以。 .navbar-form navbar-left需要position: relative;。如果这样做，您可以使用此元素来定位和调整#searchResults的绝对容器。

您的HTML无效，这是一个更干净的版本：

<div class="navbar-form navbar-left">
    <input class="form-control" placeholder="Search..." type="text" autocomplete="off"  id="autocomplete_search" />
    <div id="searchResults">So much results...</div>
 </div>

这是一些将html放入形状的CSS：

.navbar-form
{
    position: relative;

    /* just a little demo */
    margin-left:200px;
}

.form-control
{
    width: 100%;
}

#searchResults
{
    position: absolute;
    width: auto; 
    background: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    max-height: 200px;
    overflow-y: auto;

    border: 1px solid gray;

    /*This is relative to the navbar now*/
    left: 0;
    right: 0;
    top: 20px;
}

这是一个小小的演示：http://jsfiddle.net/NicoO/ZAyN9/

菜单，在Bootstrap导航栏上的搜索栏下...不兼容

1 个答案: