javascript - 如何在带有边距顶部的输入下显示数据列表

Question

首先，感谢您阅读我的问题并尝试帮助我并为我的英语道歉。

我想在包含数据列表的搜索内容和输入数据列表之间有一个空格，但我不知道为什么我不能创建那个空格。

有人可以帮帮我吗？？

这是我的代码:

render() {
    const { value } = this.state;
    return (
        <div className="search search__content">
            <div className="inner-addon left-addon">
                <i className="icon-search search-icon"></i>
                <input onChange={this.handleSearch} type="text" placeholder="Search..." value={value} list="list_languages" autoComplete="on" />
                <datalist id="list_languages">
                    <option>HTML</option>
                    <option>CSS</option>
                    <option>JavaScript</option>
                    <option>Java</option>
                    <option>Ruby</option>
                    <option>PHP</option>
                    <option>Go</option>
                    <option>Erlang</option>
                    <option>Python</option>
                    <option>C</option>
                    <option>C#</option>
                    <option>C++</option>
                    <option>HTML</option>
                </datalist>
            </div>
        </div>
    );
}

这是我的 CSS:

.search {
    height: 200px;
    padding: 10px;
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0px;

    &__content {
        top: 200px;
        left: 320px;
        width: 500px;
        height: 50px;
        background-color: #fff;
        border-radius: 34px;
        box-shadow: 0px 0px 12px rgba(0,0,0,0.3);

        input {
            width: 450px;
            height: 30px;
            background: transparent;
            border: 0;
            display: block;
            padding: 10px 32px 10px 20px;
            font-size: 14px;
            color: #000;
            border-radius: 34px;
            border: none;
            outline: none;

        }

        datalist {
            // why doesn't work?
            top: 50px;
            margin-top: 50px;
        }

        input::-webkit-calendar-picker-indicator {
            display: none;
        }

        .input-field input.placeholder {
            color: #ccc;
            font-size: 14px;
        }

        .search-icon {
            // color: #576a8b;
            color: #000;
            font-size: 20px;
        }

        .search-icon:hover {
            cursor: pointer;
            color: gray;
        }

        .inner-addon { 
            position: relative; 
            left: 10px;
        }

        .inner-addon i {
          position: absolute;
        }

        .left-addon i  { left:  0px;}
        .left-addon input  { padding-left:  30px; }
    }
}

Answer 1

非常感谢!!最后，我使用填充将文本向上移动，但将输入向下移动，并在文本和选项之间留出一点空间。

JavaScript 代码:

render() {
    const { value, options } = this.state;
    return (
        <div className="search search__content">
            <div className="inner-addon left-addon">
                <input onChange={this.handleSearch} onKeyDown={this.handlePressEnter} type="text" placeholder={PLACEHOLDER} value={value} list="list_languages" autoComplete="on" />
                <div className="datalist">
                    <datalist id="list_languages">
                        { options && options.length > 0 && options.map( (option, index) => {
                            return (
                                <option value={option.nombre} key={index} />
                            );
                        })}
                    </datalist>
                </div>
            </div>
        </div>
    );
}

CSS:

.search {
    height: 200px;
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0px;

    &__content {
        top: 200px;
        left: 320px;
        width: 430px;
        height: 50px;
        background-color: #fff;
        border-radius: 34px;
        box-shadow: 0px 0px 12px rgba(0,0,0,0.3);

        input {
            width: 380px;
            height: 50px;
            background: transparent;
            border: 0;
            display: block;
            padding: 0px 32px 10px 10px;
            font-size: 14px;
            color: #000;
            border-radius: 34px;
            border: none;
            outline: none;
        }

        input::-webkit-calendar-picker-indicator {
            display: none;
        }

        .input-field input.placeholder {
            color: #ccc;
            font-size: 14px;
        }

        .inner-addon { 
            position: relative;
            top: 5px;
            left: 22px;
        }

        // .search-icon {
        //     // color: #576a8b;
        //     color: #000;
        //     font-size: 20px;
        // }

        // .search-icon:hover {
        //     cursor: pointer;
        //     color: gray;
        // }

        // .inner-addon i {
        //   position: absolute;
        // }

        // .left-addon i  { left:  0px;}
        // .left-addon input  { padding-left:  30px; }
    }
}