Question

我需要为我的网站缩短很长的制造商清单。当前代码如下：

<div class="container">
   <section id="manufacturerIndex" class="page-layout no-breadcrumb pb80">
      <h1 class="page_headers">Shop By Brand</h1>
      <!--START: manufacturer-->
      <li id="mfg_[id]" class="mfg-name list-group-item"><a 
href="search_groups.asp?manf=[id]">[manufacturer]</a></li>
      <!--END: manufacturer-->
      <ul class="manufacturer-index list-group">
         <!--START: manufacturerindex-->[category structure goes here]
         <!--END: manufacturerindex-->
      </ul>
   </section>
</div>

我已经尝试了一些方法，但是看起来不对。只需要一个简单的拖放滚动之类的东西。即使我可以让方框仅显示8个左右并且比滚动。我做错了。

有什么想法可以扔在那里吗？

Answer 1

就像大卫·托马斯（David Thomas）在对您的帖子的评论中所建议的那样，overflow-y CSS属性可满足您的需求。

阅读有关how overflow-y works on the MDN Web Docs的信息。
下面是一个CodePen示例（用Pug（一种HTML模板语言）编写），它显示了您正在使用的问题的可能解决方案：https://codepen.io/bzelip/pen/rZbbZL。
这是上面编译成HTML的Pug代码，可在Stack Overflow中运行（按代码下方的“运行代码段”按钮以查看此页面中的解决方案）：

.dropdown-container {
  max-height: 100px;
  width: 100px;
  overflow-y: scroll;
  border: 1px solid black;
}

<h1 class="page_headers">Shop By Brand</h1>
<ul class="dropdown-container">
  <li class="mfg-name list-group-item" id="mfg_0"><a href="#">mfg_0</a></li>
  <li class="mfg-name list-group-item" id="mfg_1"><a href="#">mfg_1</a></li>
  <li class="mfg-name list-group-item" id="mfg_2"><a href="#">mfg_2</a></li>
  <li class="mfg-name list-group-item" id="mfg_3"><a href="#">mfg_3</a></li>
  <li class="mfg-name list-group-item" id="mfg_4"><a href="#">mfg_4</a></li>
  <li class="mfg-name list-group-item" id="mfg_5"><a href="#">mfg_5</a></li>
  <li class="mfg-name list-group-item" id="mfg_6"><a href="#">mfg_6</a></li>
  <li class="mfg-name list-group-item" id="mfg_7"><a href="#">mfg_7</a></li>
  <li class="mfg-name list-group-item" id="mfg_8"><a href="#">mfg_8</a></li>
  <li class="mfg-name list-group-item" id="mfg_9"><a href="#">mfg_9</a></li>
  <li class="mfg-name list-group-item" id="mfg_10"><a href="#">mfg_10</a></li>
  <li class="mfg-name list-group-item" id="mfg_11"><a href="#">mfg_11</a></li>
  <li class="mfg-name list-group-item" id="mfg_12"><a href="#">mfg_12</a></li>
  <li class="mfg-name list-group-item" id="mfg_13"><a href="#">mfg_13</a></li>
  <li class="mfg-name list-group-item" id="mfg_14"><a href="#">mfg_14</a></li>
  <li class="mfg-name list-group-item" id="mfg_15"><a href="#">mfg_15</a></li>
  <li class="mfg-name list-group-item" id="mfg_16"><a href="#">mfg_16</a></li>
  <li class="mfg-name list-group-item" id="mfg_17"><a href="#">mfg_17</a></li>
  <li class="mfg-name list-group-item" id="mfg_18"><a href="#">mfg_18</a></li>
  <li class="mfg-name list-group-item" id="mfg_19"><a href="#">mfg_19</a></li>
  <li class="mfg-name list-group-item" id="mfg_20"><a href="#">mfg_20</a></li>
  <li class="mfg-name list-group-item" id="mfg_21"><a href="#">mfg_21</a></li>
  <li class="mfg-name list-group-item" id="mfg_22"><a href="#">mfg_22</a></li>
  <li class="mfg-name list-group-item" id="mfg_23"><a href="#">mfg_23</a></li>
  <li class="mfg-name list-group-item" id="mfg_24"><a href="#">mfg_24</a></li>
  <li class="mfg-name list-group-item" id="mfg_25"><a href="#">mfg_25</a></li>
  <li class="mfg-name list-group-item" id="mfg_26"><a href="#">mfg_26</a></li>
  <li class="mfg-name list-group-item" id="mfg_27"><a href="#">mfg_27</a></li>
  <li class="mfg-name list-group-item" id="mfg_28"><a href="#">mfg_28</a></li>
  <li class="mfg-name list-group-item" id="mfg_29"><a href="#">mfg_29</a></li>
  <li class="mfg-name list-group-item" id="mfg_30"><a href="#">mfg_30</a></li>
  <li class="mfg-name list-group-item" id="mfg_31"><a href="#">mfg_31</a></li>
  <li class="mfg-name list-group-item" id="mfg_32"><a href="#">mfg_32</a></li>
  <li class="mfg-name list-group-item" id="mfg_33"><a href="#">mfg_33</a></li>
  <li class="mfg-name list-group-item" id="mfg_34"><a href="#">mfg_34</a></li>
  <li class="mfg-name list-group-item" id="mfg_35"><a href="#">mfg_35</a></li>
  <li class="mfg-name list-group-item" id="mfg_36"><a href="#">mfg_36</a></li>
  <li class="mfg-name list-group-item" id="mfg_37"><a href="#">mfg_37</a></li>
  <li class="mfg-name list-group-item" id="mfg_38"><a href="#">mfg_38</a></li>
  <li class="mfg-name list-group-item" id="mfg_39"><a href="#">mfg_39</a></li>
  <li class="mfg-name list-group-item" id="mfg_40"><a href="#">mfg_40</a></li>
  <li class="mfg-name list-group-item" id="mfg_41"><a href="#">mfg_41</a></li>
  <li class="mfg-name list-group-item" id="mfg_42"><a href="#">mfg_42</a></li>
  <li class="mfg-name list-group-item" id="mfg_43"><a href="#">mfg_43</a></li>
  <li class="mfg-name list-group-item" id="mfg_44"><a href="#">mfg_44</a></li>
  <li class="mfg-name list-group-item" id="mfg_45"><a href="#">mfg_45</a></li>
  <li class="mfg-name list-group-item" id="mfg_46"><a href="#">mfg_46</a></li>
  <li class="mfg-name list-group-item" id="mfg_47"><a href="#">mfg_47</a></li>
  <li class="mfg-name list-group-item" id="mfg_48"><a href="#">mfg_48</a></li>
  <li class="mfg-name list-group-item" id="mfg_49"><a href="#">mfg_49</a></li>
  <li class="mfg-name list-group-item" id="mfg_50"><a href="#">mfg_50</a></li>
  <li class="mfg-name list-group-item" id="mfg_51"><a href="#">mfg_51</a></li>
  <li class="mfg-name list-group-item" id="mfg_52"><a href="#">mfg_52</a></li>
  <li class="mfg-name list-group-item" id="mfg_53"><a href="#">mfg_53</a></li>
  <li class="mfg-name list-group-item" id="mfg_54"><a href="#">mfg_54</a></li>
  <li class="mfg-name list-group-item" id="mfg_55"><a href="#">mfg_55</a></li>
  <li class="mfg-name list-group-item" id="mfg_56"><a href="#">mfg_56</a></li>
  <li class="mfg-name list-group-item" id="mfg_57"><a href="#">mfg_57</a></li>
  <li class="mfg-name list-group-item" id="mfg_58"><a href="#">mfg_58</a></li>
  <li class="mfg-name list-group-item" id="mfg_59"><a href="#">mfg_59</a></li>
  <li class="mfg-name list-group-item" id="mfg_60"><a href="#">mfg_60</a></li>
  <li class="mfg-name list-group-item" id="mfg_61"><a href="#">mfg_61</a></li>
  <li class="mfg-name list-group-item" id="mfg_62"><a href="#">mfg_62</a></li>
  <li class="mfg-name list-group-item" id="mfg_63"><a href="#">mfg_63</a></li>
  <li class="mfg-name list-group-item" id="mfg_64"><a href="#">mfg_64</a></li>
  <li class="mfg-name list-group-item" id="mfg_65"><a href="#">mfg_65</a></li>
  <li class="mfg-name list-group-item" id="mfg_66"><a href="#">mfg_66</a></li>
  <li class="mfg-name list-group-item" id="mfg_67"><a href="#">mfg_67</a></li>
  <li class="mfg-name list-group-item" id="mfg_68"><a href="#">mfg_68</a></li>
  <li class="mfg-name list-group-item" id="mfg_69"><a href="#">mfg_69</a></li>
  <li class="mfg-name list-group-item" id="mfg_70"><a href="#">mfg_70</a></li>
  <li class="mfg-name list-group-item" id="mfg_71"><a href="#">mfg_71</a></li>
  <li class="mfg-name list-group-item" id="mfg_72"><a href="#">mfg_72</a></li>
  <li class="mfg-name list-group-item" id="mfg_73"><a href="#">mfg_73</a></li>
  <li class="mfg-name list-group-item" id="mfg_74"><a href="#">mfg_74</a></li>
  <li class="mfg-name list-group-item" id="mfg_75"><a href="#">mfg_75</a></li>
  <li class="mfg-name list-group-item" id="mfg_76"><a href="#">mfg_76</a></li>
  <li class="mfg-name list-group-item" id="mfg_77"><a href="#">mfg_77</a></li>
  <li class="mfg-name list-group-item" id="mfg_78"><a href="#">mfg_78</a></li>
  <li class="mfg-name list-group-item" id="mfg_79"><a href="#">mfg_79</a></li>
  <li class="mfg-name list-group-item" id="mfg_80"><a href="#">mfg_80</a></li>
  <li class="mfg-name list-group-item" id="mfg_81"><a href="#">mfg_81</a></li>
  <li class="mfg-name list-group-item" id="mfg_82"><a href="#">mfg_82</a></li>
  <li class="mfg-name list-group-item" id="mfg_83"><a href="#">mfg_83</a></li>
  <li class="mfg-name list-group-item" id="mfg_84"><a href="#">mfg_84</a></li>
  <li class="mfg-name list-group-item" id="mfg_85"><a href="#">mfg_85</a></li>
  <li class="mfg-name list-group-item" id="mfg_86"><a href="#">mfg_86</a></li>
  <li class="mfg-name list-group-item" id="mfg_87"><a href="#">mfg_87</a></li>
  <li class="mfg-name list-group-item" id="mfg_88"><a href="#">mfg_88</a></li>
  <li class="mfg-name list-group-item" id="mfg_89"><a href="#">mfg_89</a></li>
  <li class="mfg-name list-group-item" id="mfg_90"><a href="#">mfg_90</a></li>
  <li class="mfg-name list-group-item" id="mfg_91"><a href="#">mfg_91</a></li>
  <li class="mfg-name list-group-item" id="mfg_92"><a href="#">mfg_92</a></li>
  <li class="mfg-name list-group-item" id="mfg_93"><a href="#">mfg_93</a></li>
  <li class="mfg-name list-group-item" id="mfg_94"><a href="#">mfg_94</a></li>
  <li class="mfg-name list-group-item" id="mfg_95"><a href="#">mfg_95</a></li>
  <li class="mfg-name list-group-item" id="mfg_96"><a href="#">mfg_96</a></li>
  <li class="mfg-name list-group-item" id="mfg_97"><a href="#">mfg_97</a></li>
  <li class="mfg-name list-group-item" id="mfg_98"><a href="#">mfg_98</a></li>
  <li class="mfg-name list-group-item" id="mfg_99"><a href="#">mfg_99</a></li>
  <li class="mfg-name list-group-item" id="mfg_100"><a href="#">mfg_100</a></li>
</ul>

祝你好运！

如何在HTML中缩短一个非常长的列表

1 个答案: