html - 按钮图标向右浮动不起作用
问题描述
我有按钮,里面有图标。我正在尝试使用 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>
我在这里缺少什么?我需要对右侧的图标显示进行什么更改?
解决方案
尝试将 a 包裹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>
推荐阅读
- mongodb - 为什么 cursor.count 方法会在不同版本的 MongoDB 上改变其行为
- javascript - Webpack 5 不显示图像
- processing - 获取当前投影矩阵
- visual-studio-code - 我如何在 vscode 中变得更漂亮更漂亮
- c++ - 如何在完全透明的窗口内绘制部分透明的位图?
- windows - 使用 url 时出现无效键错误。
.insteadOf 在 Windows 上 - selenium-webdriver - 什么是 Rest Assured Api 中的 Filter 接口。它用于传递请求中的参数?
- shopify - 无法在 Shopify 部分通过 Liquid 添加图片
- python - Python Flask SQLAlchemy 中的数据访问对象(DAO)
- javascript - 页面重新加载时,首先重定向“/”,然后重新加载页面正在上传