0

我正在努力使用 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，但不确定是否有必要。

谢谢你的帮助。

4

4 回答 4

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/

于 2013-05-02T13:32:46.497 回答
0

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

于 2013-05-02T13:16:42.910 回答
0

当我在小提琴中运行你的代码时，我得到了这个：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;}

该列表位于搜索框及其标签下方，而不是您所说的右侧。我想我不清楚你想从你的问题中得到什么。

你想让列表缩进吗？你能再澄清一点吗？

于 2013-05-02T13:25:35.580 回答
0

首先，在 li 之前有一个 href 需要移动到 li 内，同时删除 display: block-inline 并仅保留块，然后添加 #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/

于 2013-05-02T13:26:53.493 回答