按钮图标向右浮动不起作用答案

【问题标题】：Button Icon float right not working按钮图标向右浮动不起作用
【发布时间】：2018-05-10 17:25:20
【问题描述】：

我有一个按钮，里面有图标。我正在尝试使用 CSS float: right; 在左侧显示文本并在右侧显示图标但图标和文本仍居中显示。

这里是 HTML：

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/button/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
    

</head>
<body>

        <div id="example">
            <div class="demo-section k-content">
                <div>
                    <h4>Basic Button</h4>
                    <p>
				
							
							<button id="primaryTextButton" class="k-button" title="Example of tool tip!" >Primary Button
							<span class="k-icon k-i-info">
							</button>
							</span>

                        
                    </p>
                </div>             
            <script>
                $(document).ready(function () {
                   
                });
            </script>

            <style>
                .demo-section p {
                    margin: 0 0 30px;
                    line-height: 50px;
                }
                .demo-section p .k-button {
                    margin: 0 10px 0 0;
                }
                .k-primary {
                    min-width: 150px;
                }
				.k-button {
				min-width: 400px;						
				}
				
				.k-icon{
					padding: 10px;
					font-size: 32px;					
				}
            </style>
        </div>

</body>
</html>

我在这里缺少什么？我需要对右侧的图标显示进行什么更改？

【问题讨论】：

将span移动到文本“示例”下方
请发布最少的代码来复制问题，而不是代码截图。
@BenM 样式是使用 KendoUI JS 生成的，因此无法真正发布完整代码。
使用工作示例更新问题

标签： html css kendo-ui glyphicons

【解决方案1】：

尝试将div 包裹在您的button 周围并将overflow: auto 应用于它。

    <div style="overflow: auto;"><button id="reportBtn_33301" type="button" class="k-button k-button-icontext" title=" data-role="button" role="button" aria-disabled="false" tabindex="0">
<span class="k-icon k-i-info"></span>
Example
</button></div>

【讨论】：

@Farukh 嗯，尝试将position: absolute 添加到按钮。

【解决方案2】：

<span class="k-icon k-i-info"></span>

'span' 标签默认显示属性是内联元素。

您需要更改它以显示内联块才能工作。然后浮动将起作用
将其更改为显示宽度较小的块，使其适合按钮，然后尝试为其赋予浮动属性。

阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/display

【讨论】：

span 由 Kendo UI 自动添加，因此无法（或不知道如何）真正改变它。
1.尝试为图标制作按钮position : relative 和position: absolute，然后使用 top 和 left 属性。 2. 在文本示例之后粘贴 span，这应该可以工作
添加了 HTML 示例