html - 如何使html数据列表溢出？

Question

我试图让类别列表显示大约 7 个选项并在其余选项上滚动，因为列表很长并且会滚动到页面之外。我试过做 css 溢出，但我不确定在哪里做。

<form class="gameForm" method='POST' action='/game'>
        <h2>CHOOSE A CATEGORY</h2>
        <input type="text" list="category" name="category" placeholder="Category">
            <datalist id="category">
                <option value="any">Any Category</option>
                <option value="9">General Knowledge</option>
                <option value="10">Entertainment: Books</option>
                <option value="11">Entertainment: Film</option>
                <option value="12">Entertainment: Music</option>
                <option value="13">Entertainment: Musicals &amp; Theatres</option>
                <option value="14">Entertainment: Television</option>
                <option value="15">Entertainment: Video Games</option>
                <option value="16">Entertainment: Board Games</option>
                <option value="17">Science &amp; Nature</option>
                <option value="18">Science: Computers</option>
                <option value="19">Science: Mathematics</option>
                <option value="20">Mythology</option>
                <option value="21">Sports</option>
                <option value="22">Geography</option>
                <option value="23">History</option>
                <option value="24">Politics</option>
                <option value="25">Art</option>
                <option value="26">Celebrities</option>
                <option value="27">Animals</option>
                <option value="28">Vehicles</option>
                <option value="29">Entertainment: Comics</option>
                <option value="30">Science: Gadgets</option>
                <option value="31">Entertainment: Japanese Anime &amp; Manga</option>
                <option value="32">Entertainment: Cartoon &amp; Animations</option>	
            </datalist>
         <h2>NUMBER OF QUESTIONS</h2>
        <input class="number" name='number_of_questions' type='number' min='1' max="50" placeholder='Number of Questions' required />
        <h2>DIFFICULTY</h2>   
        <input list="difficulty" name="difficulty" placeholder="Difficulty">
            <datalist id="difficulty">
                <option value="easy">
                <option value="medium">
                <option value="hard">
            </datalist>
    
        <input class="buttons" type='submit' value='ADD GAME!' />
    </form>

Answer 1

您可以使用组合框替代此处提供的数据列表。

https://www.zoonman.com/projects/combobox/

    <style type="text/css" media="screen">
        div.combobox    {font-family: Tahoma;font-size: 12px}
        div.combobox    {position: relative;zoom: 1}
        div.combobox    div.dropdownlist    {display: none;width: 200px;
            border: solid 1px #000;background-color: #fff;
            height: 200px;overflow: auto;position: absolute;
            top: 18px;left: 0px;}
        div.combobox    .dropdownlist   a   {display: block;text-decoration: none;
            color: #000;padding: 1px;height: 1em;cursor: default}
        div.combobox    .dropdownlist   a.light {color: #fff;
            background-color: #007}
        div.combobox    .dropdownlist, input {font-family: Tahoma;font-size: 12px;}
        div.combobox    input {float: left;width: 182px;
            border: solid 1px #ccc;height: 15px}
        div.combobox    span    {border: solid 1px #ccc;background: #eee;
            width: 16px;height: 17px;
            float: left;text-align: center;border-left: none;cursor: default}
    </style>

<!-- HTML code -->
<div class="combobox">
    <input type="text" name="comboboxfieldname" id="cb_identifier">

    <span>▼</span>
    <div class="dropdownlist">
        <a>Item1</a>
        <a>Item2</a>

        <a>Item3</a>
    </div>
</div>
<!-- JS code -->
<script type="text/javascript" charset="utf-8" src="combobox.js"></script>
<script type="text/javascript" charset="utf-8">

var no = new ComboBox('cb_identifier');
</script>

从以下位置下载组合框插件:

https://www.zoonman.com/projects/combobox/combobox.js