Question

我正在努力使用CSS来获取我的搜索框和列表，看起来就像我想要的那样。我希望列表附加到文本框的底部，我不知道如何做到这一点。这是我到目前为止所缺少的......

 <style>
ul.drop{display:inline-block;}
ul.drop, ul.drop li { list-style: none; margin: 0; padding: 0; background: #ECF1F3; color: #28313F;  }

ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; background: #1e7c9a;}

</style>
</head>

<body>
<label for="someinput">Search Ingredients</label>
<input id="someinput">
<ul id="menu" class="drop" style="overflow:auto; max-height:200px;">
  <a href="#"><li>ingredient1</li></a>
  <a href="#"><li>ingredient2</li></a>
  <a href="#"><li>ingredient3</li></a>
  <a href="#"><li>ingredient4</li></a>
  <a href="#"><li>ingredient5</li></a>
</ul>
  <label for="qty"></label>
  <input type="text" size="5" name="qty" id="qty" />
  g
  <button type="submit" name="add" id="add" value="Add">Add</button>
</body>

列表当前显示在框的右侧，我希望它直接位于文本框的下方。我正在考虑列表中的容器div，但不确定是否有必要。

感谢您的帮助。

Answer 1

这里有两个选项，包括将html更改为以下内容：

<div class="inputHolder">
    <label for="left someinput">Search Ingredients</label>
    <input id="someinput" /><br />
    <ul id="menu" class="drop" style="overflow:auto; max-height:200px;">
        <li><a href="#">ingredient1</a></li>
        <li><a href="#">ingredient2</a></li>
        <li><a href="#">ingredient3</a></li>
        <li><a href="#">ingredient4</a></li>
        <li><a href="#">ingredient5</a></li>
    </ul>
</div>
<div class="inputHolder">
  <label for="qty">g</label>
  <input type="text" size="5" name="qty" id="qty" />
  <button type="submit" name="add" id="add" value="Add">Add</button>
</div>

然后，如果您希望列表显示在任何其他内容之上（即内容将被推下），您需要以下额外的样式：

.inputHolder {float:left; margin-right:10px;}
#menu {margin-left:7.5em}

http://jsfiddle.net/FteVT/3/

如果您希望列表显示在（重叠）任何其他内容之上，您可以使用以下样式：

.inputHolder {float:left; margin-right:10px; position:relative;}
#menu {position:absolute; left:7.5em; top:1.5em;}

http://jsfiddle.net/FteVT/4/

Answer 2

抱歉，这不是一个真正的答案，但您可能对jquery选择的组件感兴趣，它可以完成这项工作：jQuery Chosen

Answer 3

当我在小提琴中运行你的代码时，我得到了这个：http://jsfiddle.net/Lera/VG642/

使用此CSS

ul.drop{display:inline-block;}
ul.drop, ul.drop li { list-style: none; margin: 0; padding: 0; background: #ECF1F3;     color: #28313F;  }
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; background: #1e7c9a;}

该列表位于搜索框及其标签下，而不是您所说的右侧。我不认为我能从你的问题中清楚你想要的地方。

您希望列表缩进吗？你能澄清一下吗？

Answer 4

要开始你需要在li里面移动一个href，还要移除display：block-inline并只保留block，然后添加#someinput {display：block}

<label for="someinput">Search Ingredients</label>
 <input id="someinput">
   <ul id="menu" class="drop" style="overflow:auto; max-height:200px;">
     <li> <a href="#">ingredient1</a></li>
     <li> <a href="#">ingredient2</a></li>
     <li> <a href="#">ingredient3</a></li>
     <li> <a href="#">ingredient4</a></li>
     <li> <a href="#">ingredient5</a></li>
  </ul>
  <label for="qty"></label>
  <input type="text" size="5" name="qty" id="qty" />
   <button type="submit" name="add" id="add" value="Add">Add</button>

CSS部分

 ul.drop{display:block;}
 ul.drop, ul.drop li { list-style: none; margin: 0; padding: 0; background: #ECF1F3; color: #28313F;  }

 ul.drop li.hover, ul.drop li:hover { display: block; position: relative; z-index: 599; background: #1e7c9a;}
 #someinput {
display:block;

}

在这里查看我的jsfiddle http://jsfiddle.net/cornelas/P7z7d/embedded/result/

使用CSS在菜单下定位菜单列表

4 个答案: