对齐输入框旁边的图标/图像答案

【问题标题】：Aligning icon/image next to input box对齐输入框旁边的图标/图像
【发布时间】：2017-03-05 18:14:42
【问题描述】：

我得到了下面的表格，我试图在第一排按钮旁边放一个图标（回形针）。顶行是一组中彼此相邻对齐的两个按钮。为此使用 UIKit。

我正在努力将按钮旁边的图标对齐。只是试图浮动它，所以它不应该调整任何东西。还给出了我所做的摘录，但是它是在 React 渲染中完成的，所以不是纯 html。

        <div className="uk-margin-large-top">
            <form id={"form_element_"} className="uk-form uk-width-4-5 uk-align-center">
                <fieldset>
                    <div className="uk-form-row textbox-margin">
                        <label htmlFor={"label_"} className={r.requiredClass}>{this.props.fieldLabel}</label>
                        <div className={"uk-form-controls uk-button-group uk-display-block"} data-uk-button-radio>
                            {buttons}
                        </div>
                    </div>
                </fieldset>
            </form>
            <i className="uk-icon-small uk-icon-paperclip"></i>
        </div>

scss 如下，

.uk-margin-large-top {
    margin-top: 50px !important;
}

.uk-align-center {
    margin-left: auto;
    margin-right: auto;
}
[class*="uk-align-"] {
    display: block;
    margin-bottom: 15px;
}

.uk-width-4-5, .uk-width-8-10 {
    width: 80%;
}
[class*="uk-width"] {
    box-sizing: border-box;
    width: 100%;
}

.uk-display-block {
    display: block !important;
}

.uk-button-group {
    font-size: 0;
}

.uk-icon-small {
    font-size: 150%;
    vertical-align: -10%;
}

在 css3 顶部的两个按钮的右侧垂直居中这个图标的最佳方法是什么？

【问题讨论】：

是的，我没有办法重新创建您的 uikit 或其他任何东西，但您有一个块级元素（表单）和一个内联元素（i），它们都应该是 display:inline-block跨度>

标签： html forms css icons alignment

【解决方案1】：

我（还）不了解您的 HTML，但您可以尝试 CSS 定位或伪元素 :before 和 :after。

也许将uk-icon-small uk-icon-paperclip 类添加到您尝试将其放在旁边的按钮中。

【讨论】：