Html 使用图标设置搜索输入的样式：将输入元素的大小保持在其容器和图标的同一行上

我正在尝试构建一个侧面带有图标的搜索输入。我正在使用ReactJs

以下是我的组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon } from 'react-fa';

import '../index.css';

class SearchInput extends Component {

    static propTypes = { 
      placeholder: PropTypes.string
    };


    render() {

            return (
                <div className='ux-search-input-container'>
                    <input className='ux-search-input' type='text' placeholder={this.props.placeholder} />
                    <Icon className='ux-search-input-icon' name='search' />
                </div>
                );
    }
};

export default SearchInput;

搜索图标将移动到下一行，如下所示：

我需要保持搜索图标在输入框的大小，无论容器有多小。如果容器缩小或放大，输入框应跟随大小，并保持搜索图标的正确大小。

1 将

display:flex

添加到CSS中的

ux搜索输入容器

类中

然后添加填充物使其居中

方法2 将

position:relative

添加到

ux搜索输入容器

类，然后添加

position:absolute；右：10px；顶部：5px

至

ux搜索输入图标

类

---

使用第二种方法工作。

尝试将

display:inline block

添加到

ux搜索输入图标

class？@Canan seaton:不工作。同样的行为。在第二次进近时表现良好。谢谢。快乐编码=]

.ux-search-input-container {
    color: $ux-color-text;
    text-align: left;
    vertical-align: middle;
    padding: 2px;
    border: solid;
    border-color: $ux-color-border;
    border-width: 1px;
    border-radius: 4px;
}

.ux-search-input {
    width: 70%;
    padding: 5px 10px 5px 10px; // top right bottom left
    border: none;
    border-width: 0px;
}

.ux-search-input-icon {
    text-align: right;
    width: 30%;
}

.ux-search-input:focus {
    outline: none;
    box-shadow: 0px 0px 2px $ux-color-light-blue;
    background-color: $ux-color-hover;
}