我有一个按钮，里面有图标。我正在尝试使用 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>我在这里缺少什么？右边的图标显示需要改什么？
最佳答案
尝试将 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>
关于html - 按钮图标向右浮动不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50278323/