开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何将按钮标签放在左边，图标放在右边？

要将按钮标签放在左边，图标放在右边，可以使用HTML和CSS来实现。以下是一个简单的示例，展示了如何实现这一布局：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button with Icon</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="button-with-icon">
        <span class="button-label">按钮标签</span>
        <i class="icon">🌟</i>
    </button>
</body>
</html>

CSS部分

.button-with-icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

.button-label {
    flex-grow: 1;
}

.icon {
    margin-left: 10px;
}

解释

HTML部分:
- 创建一个按钮元素，并在其中包含一个<span>用于显示按钮标签，以及一个<i>用于显示图标。
- 使用class="button-with-icon"来应用CSS样式。

CSS部分:
- .button-with-icon类使用display: flex;来启用Flexbox布局，使得子元素（标签和图标）可以并排排列。
- align-items: center;确保标签和图标在垂直方向上居中对齐。
- justify-content: space-between;使得标签和图标在水平方向上分别靠左和靠右对齐。
- .button-label类使用flex-grow: 1;使得标签占据剩余的空间，从而将图标推到右边。
- .icon类添加了一个左边距，以增加标签和图标之间的间距。

应用场景

这种布局方式适用于需要清晰区分按钮文本和图标的场景，例如：

导航按钮，其中文本表示功能，图标提供视觉提示。
操作按钮，如“保存”或“删除”，其中图标增强用户对操作的直观理解。

通过这种方式，可以有效地提高按钮的可读性和用户体验。

相关搜索:如何将navbar品牌放在左边，把汉堡包放在右边？如何将文本放在右边？如何将div放在右边？将一个对象放在左边，第二个放在右边将一个HTML元素放在另一个元素的右边，而不是放在右边或左边有没有办法把delete按钮放在左边 tkinter python:怎样才能把收音机放在左边，按钮放在中间？如何使用bootstrap将按钮放在左边，并将徽标放在同一行的中间？如何将一个按钮放在两个不同的div中，另一个按钮放在左边如何将按钮放在浮动按钮中？如何将图标放在<a>标记文本旁边如何将单选按钮图标放在MaterialRadioButton视图的中心？如何在Latex中将包含图形放在表格附近(在表格的右边或左边)？如何将图片logo放在导航栏的最左边？如何将ttk Treeview的所有元素都放在左边？Bootstrap 4.5.0:我的切换按钮出现在我的品牌形象/名称的右边?我如何将它放在左边？如何将图标和`a`放在一行如何将图标放在导航栏的左侧？将按钮与图标放在顶部，每个按钮并排放置？如何将图片放在按钮后面？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

干货！iOS 与 Android 的APP 设计差异

相反，Apple则建议将全局导航放在标签栏中。标签栏放在应用的底部，让应用的核心功能能够快速切换。通常，底部栏标签不会超过5个。...左边是iOS标准日期选择器; 右边是Android标准日期选择器左边是iOS标准选择器；右边是Android标准选择器 IOS和Android中的按钮样式在Android设计规范中有2种不同样式的按钮...左边是标准的Android按钮；右边是标准的iOS按钮还有一种非常有特点的按钮类型——在Android上叫做浮动按钮，在iOS上叫做活动按钮。浮动按钮用来展示应用的主要操作。...而在iOS中与之类似的按钮则叫做活动按钮，通常会放在底部导航的中间左边是标准的iOS活动按钮；右侧是标准的Android浮动按钮 IOS与Android底部操作视图的差异在Android中有两种不同类型的底部操作视图...左边是iOS版的Gmail，右边是Android版的Gmail 左边是iOS版的Instagram，右边是Android的Instagram 但其实显而易见——使用两个平台系统自身的组件设计应用，流程要快很多

3.5K1 0

Python Canvas and Grid Tkinter美妙布局canvas和其他组件

以下是一个简单的例子，演示如何将Canvas与其他组件结合使用并使用Grid布局：一、问题背景在 Python Tkinter 中，用户想要在网格布局中嵌入一个 canvas 组件，但同时希望将输入框和标签组件与...如果直接将 canvas 放在网格中的某个单元格中，它会占据整个单元格，导致输入框和标签组件被挤到一边或留出大量空白空间。...用户想要将 canvas 放在右边，并将其他组件放在左边，而没有任何多余的空白空间。...二、解决方案为了解决这个问题，我们可以在网格中创建一个 Frame 组件，并将输入框和标签组件放在这个 Frame 中。...Frame 中的任意位置，并设置其 sticky 参数为 "w" 或 "e"，表示组件会黏贴在单元格的左边或右边：label1 = Label(frame, text="Figure").grid(row

2341 0

当心理学遇上设计：格式塔原理是如何服务于设计的？

这里我给到的设计解决方案是：为了突出焦点，我将“View FAQs按钮”界面更改为边框按钮，给下载按钮添加了聚光灯效果。并且也调换了它们的排序，将下载按钮放在右边，FQA按钮放在了左边。...为什么要把重要按钮放在左侧呢？不妨看看Gutenberg Diagram里的说法: “根据这个定理，右边的两个点（在“Z”字母的第一个点和它的最末端）是用户最想要采取行动的地方。...因此，关于行为召唤按钮究竟应该放在左边和右边其实是没有必要争论的。它就是应该始终放在右边。”...采用视觉焦点原则，可以很好地减少了用户阅读标签的时间，下面就是我给出的解决方案：首先互换了两个按钮的位置，并且把OK按钮的名字改为了“Submit”，这样，用户的体验就流畅了，也能很快知晓他们一旦单击提交按钮就会有怎样的操作...Netflix元素的右上方，用黄色图标来提醒用户，这样，功能列表就可以有更多的空间，不会拥挤，用户一点单击黄色图标，该提示就会展示出来。

9571 0

Material Design 实战之第二弹——滑动菜单详解&实战

1.2.6 实际上Toolbar最左侧的这个按钮就叫作HomeAsUp按钮，它默认的图标是一个返回的箭头，含义是返回上一个活动；这里将其换了图标，并将逻辑响应修改了； HomeAsUp...但是关于第二个子控件有一点需要注意，layout_gravity这个属性是必须指定的，因为我们需要告诉DrawerLayout滑动菜单是在屏幕的左边还是右边，指定left表示滑动菜单在左边；指定...right表示滑动菜单在右边；这里指定了start，表示会根据系统语言进行判断，如果系统语言是从左往右的，比如英语、汉语，滑动菜单就在左边，如果系统语言是从右往左的，比如阿拉伯语，滑动菜单就在右边。...很明显，这里我们将它默认的样式（该按钮图标）和作用（改/设置了按钮点击事件）都进行了修改。...1/4.准备menu 我们先来准备menu，这里我事先找了几张图片来作为按钮的图标，并将它们放在了drawable-xxhdpi目录下。

9623 0

Material Design — 按钮（ Buttons）

·切换按钮（Toggle buttons）将选项汇聚在一起。图标切换允许选择或取消选择单个选项。...推荐的按钮放置标准提示框屏幕上的按钮对齐方式：右边将肯定性按钮放在右侧，否定性的放在左边。表单屏幕上的按钮对齐：左边将肯定性按钮放在左侧，否定性的放在右边。...对于冗长或复杂的表单，建议将按钮放在表单的左侧，肯定性按钮位于否定性按钮的左侧。 ---- 样式版式设计按钮文本应该用有大写的语言大写。...切换按钮需要： ·组中至少有三个切换按钮 ·用文字，图标或两者标记按钮建议使用以下组合： ·可以都不选 ·只能选一个 ·可以选多个 ?...图标切换图标适用于切换按钮，允许选择或取消选择单个选项，例如向项目添加或移除星标。他们最好位于应用栏，工具栏，动作按钮或切换。图标切换可能会在其触摸目标范围外显示有界或无界的墨水扩散反应波纹。

3.9K16 0

接口测试平台代码实现10：菜单页面升级

所以我们也可以写死这个按钮的位置坐标：给button标签增加css属性，所有css属性都是可以放在标签内的style属性中的，多个用;隔开。...margin-left的含义是外左边距，就是按钮距离浏览器左边界217px，217px是我量出的菜单宽度，各位可以自己多试试，找出一个最合适的距离。...那我们继续修改js的这个函数，让这个按钮本身移动到最左边，并且文案改成‘显示’ btn就是我们的这个控制按钮，点击后，把它的外左边距变成0px，就是紧贴左边，然后它的文案改成 ‘显示了’；让我们刷新页面再点击看看效果...我的习惯是避免左侧菜单来回显/隐影响，就放在右上角吧：让我们在刚刚的script标签下面继续写一个button ,文案叫主页然后给它的css属性加上：float,值为right 这样可以让这个按钮永远显示在父级...这里我们最好给添加一个标志图案来给人直接回主页的感觉：有俩种办法，一种是加入i标签，来添加图标。

2K3 0

深度好文！UI界面视觉平衡的终极指南

可以发现左边的正方形比圆形面积大，视觉权重也更大。而右边的圆形和正方形的面积是是相等的，它们的视觉效果也更平衡。我们也可以用方形和三角形来见证同样的效果。...如果将Twitter和Pinterest的图标放大一些，看起来就能和Facebook和Instagram的图标保持平衡了。 ? 视觉平衡的另一个例子就将是一个文本框和一个圆形按钮放在一起。...我们把“发送”图案放在一个圆形按钮的背景上。你认为哪种图标在视觉上更平衡? ? 你应该已经注意到左边的不平衡了，这是因为不同的对齐方法。...所以从视觉上来说，左边那种被修改过的圆形会比右边的几何圆形看起来更加圆润。 ? 我们如何利用这一原理？当然是圆角！...现在我们可以将这种方法应用于圆角按钮。 ? 可以发现右边的按钮有更平滑的圆角，而且视觉效果也更好。 APP 图标也是如此，用标准的圆角是不能达到完美效果的。

2.5K4 0

Fdog系列（四）：使用Qt框架模仿QQ实现登录界面，界面篇。

包括几个标签，按钮，以及文本框。你可以看到文本框下面的三个控件中右边那个貌似不是很对齐，怎么做呢，给他们三加一个水平布局就可以解决问题，你可能会说使用XY值也可以条件，好吧，随便你。...（ToolButton）和左侧的绿色标签放在水平布局中，如果在布局中两个控件需要间隔一定距离，可以使用弹簧进行间隔。...如果你给按钮添加了图标，但是是像关闭按钮那样后面有白色的话，可以选中按钮属性中的autoRaise，勾选一下，你就会发现背景透明了。...现在，我们着重对样式进行一个美化，让它从左边的图向右边靠拢。...2.如何在文本框添加图标，包括左边和右边 //Fdog号码文本框 QAction * searchAction = new QAction(ui->lineEdit); searchAction->setIcon

4.1K5 2

提升UI产品体验的14个细节！你都知道吗？

图片03给选项加图标使用图标、动画作为标签，有助于更轻松地理解内容，它使界面看起来更加理性和丰富，能瞬间抓住用户的眼球。...（彩云注：左侧的导航相较于右边，很难第一时间准确识别它的意思，增加图标后不仅更快看清，视觉上也更加美观。）图片04大段内容要拆分大段的长句会让内容变得难以阅读。...（彩云注：左边的表单UI不方便跟踪进度和流程，右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。）图片06错误提示要明确错误提示一定要明确，易于理解，方便用户进行下一步的操作。...此外，按钮的大小应该易于点击，避免用户因尝试点击时不方便而流失。（彩云注：左侧的按钮不在正确的决策位置以及按钮太小，右侧的按钮简洁明了并且符合用户的心理预期，能够让用户更快决策并点击。）...图片10优先社交媒体账号登录当用户准备登录或注册你平台的时候，把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号，能很好地增加点击率。

7862 0

安卓逆向系列教程（三）静态分析工具

之后切换到“工程管理器”，可以看到项目的结构，点击其中的文件可以在右边看到文件内容： ? 点击编辑框上方的 Java 图标，就会打开熟悉的 jd-gui 窗口： ?...如果我们启动了模拟器，可以使用右边的几个按钮安装并运行。此外，“工具”选项卡中有很多实用工具，大家可以一一尝试。 ? APK 改之理在这里下载软件。双击ApkIDE.exe启动程序。...下图中各个图标按钮都有提示文字，可以将鼠标悬浮在按钮上显示文字提示。具体的各项说明会单独写个文章来详细解释，基本上也没什么难点。 ?...（2）在“输入输出面板组”的搜索结果面板中，搜索结果列表以标签的形式各自分开，鼠标悬浮在标签上会显示对应搜索结果的搜索条件。...打开软件之后，点击左上角的文件夹图标，之后选择要反编译的 APK 来打开文件。之后会进行反编译，完成后，主界面是这样： ? 左边的树形图会显示项目的所有包和类。

1.8K2 0

原来“神笔马良”的那根“笔”也可以写代码

为此以后HTML5学堂的文章也会把代码案例放在这个工具中，具体的使用，大家可以去即可进入CodePen（http://codepen.io/majiang/）来查看完整的代码案例。...右边： new pen ：创建一个新的笔（案例）； login in ：登录； sign up ：注册。...点击进入之后，页面提示：页面左边是HTML编辑器部分，这这里不需要进行文档声明以及其他头部head标签的信息，直接将body标签里的具体内容放置进去即可。...页面提示：页面的右边是JS编辑器部分，在这里编写的JS代码会自动的放置到页面文档的后面，不会影响DOM树的解析，所以也不需要加入script标签。...但是如果需要新建一个代码笔，只需要点击导航栏右侧的个人小图标，然后再弹出列表上点击New Pen即可。 ?

1.3K5 0

CSS高级技巧

（ X轴右边走是正值，左边走是负值， Y轴同理） ---- 轮廓线 outline: 给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框 input...-- 当我们点击提交按钮就可以验证表单了 --> HTML5 新增的表单属性: 属性值说明...autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单 autocomplete off/on autocomplete=”on”，关闭autocomplete=”off需要放在表单内...选择首先是section 然后具有class属性并且属性值必须是 data结尾的这些元素 */ section[class$=data] { color: blue; } ---- 其他特性: 图标变模糊...: title：网页标题标签 description：网页描述标签 keywords：网页关键词标签 ico图标设置: <link rel="shortcut icon" href="favicon.ico

9992 0

Hexo Butterfly主题配置

（ X轴右边走是正值，左边走是负值， Y轴同理） ---- 轮廓线 outline: 给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框 input...-- 当我们点击提交按钮就可以验证表单了 --> HTML5 新增的表单属性: 属性值说明...autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单 autocomplete off/on autocomplete=”on”，关闭autocomplete=”off需要放在表单内...选择首先是section 然后具有class属性并且属性值必须是 data结尾的这些元素 */ section[class$=data] { color: blue; } ---- 其他特性: 图标变模糊...: title：网页标题标签 description：网页描述标签 keywords：网页关键词标签 ico图标设置: <link rel="shortcut icon" href="favicon.ico

9461 0

使用 postman 进行接口测试

在 postman 的 url 输入框输入 www.baidu.com ，点击右边的 Send 按钮，就会获取到百度首页的 HTML 文件。...确实没错，在 url 输入框输入 https://httpbin.org/post ，将左边的请求方式改成 POST 方法，POST 需要向后端发送数据，这个接口需要的数据是 json 格式的数据。...数据放在请求体 Body 中，点击 Body 按钮，选择 raw ，再点击右边的下拉框选择 JSON ，然后输入需要发送的 json 数据。...点击 postman 界面的 Body 按钮，选择 form-data ，然后按键值对的形式填写 form 表单的数据，KEY 对应 from 表单中前端标签的 name 值，VALUE 对应 from...表单中提交的内容，也就是我们在浏览器 input 标签中输入的内容。

2.2K2 0

iOS学习——Xcode9上传项目到GitHub

1 注册GitHub账号　　　显然，如果我们需要将代码存放在Github上进行管理，第一步我们需要做的就是注册一个GitHub的账号，具体注册账号的流程就不在这里进行详述了，大家自行问度娘。...主要分为两步就可以：登陆后点击下图左边图的所示的【+】号，选择【New respository】，出现下图右边图所示的界面在下图右边图所示的界面填写仓库名称和仓库描述，然后点击最下面的【create...respository】按钮即完成了创建 ?...创建完仓库之后，出现如下图左边所示的界面，我们点击下图左边图两个箭头所示的地方都可以查看我们账号下的所有仓库，我们可以看到刚刚创建的仓库如下图右边图所示。 ? ?...接下来我们看如何将我们的项目连接到项目，这一步很简单，就是要将我们待链接的项目放到刚刚从GitHub上clone下来的文件夹中就可以了。

1.2K4 0

自定义actionbar

提取出关于ActionBar的相关文件，你可以放在自己的项目中，最后会附下载地址。下面说下在程序中的用法。...新建一个TestActionBar项目，假设你把相关的代码放在了com.leaf.actionbar这个包下。首先新建一个布局文件，main.xml，如下：左边是一个显示app图标的imageview和显示title的textview，一种是empty，左边只有一个显示title的textview，右边都是自己添加的按钮，默认是...还有一些属性，homeDrawable可以替换左边那个图片，默认是那个主页的图片，dividerDrawable：分割线，dividerWidth：分割线宽度，maxItems：右边添加的item的最大个数...onActionBarItemClicked(int position) { if (position == ActionBar.OnActionBarListener.HOME_ITEM) { // 当按左边的主页按钮时所触发的操作

7349 0

从苹果按钮说起，交互设计中的那些小细节

苹果说，不论移动或电脑设备，行动按钮（Action button）都放在右边，也就是说*确定按钮放在右边*：苹果的移动设备苹果的电脑设备微软说，除了删除之类的负向操作外，不论移动或电脑设备，*确定按钮放在左边...用来测试的是一个在iPad上展示的黑白简易网站：然而，这30人被分成A和B两组，A组先使用放在左边的确定按钮，再使用放在右边的确定按钮；B组先使用放在右边的确定按钮，再使用放在左边的确定按钮。...结果出乎意料地有趣：两组的错误率完全不同人们在第一次选图时，如果确定按钮在左（A组），则有13.33% （2/15）的错误率；如果确定按钮在右边，则没有人出错。...真正意想不到的是，在第二次选图时，如果按钮从左换到右边（A组），错误率稍有提升达到23.08%；如果确定按钮从右换到左边（B组），错误率竟然从第一步的0%冲到了*66.66%*！...尤其是本实验使用iPad，而包括iPad在内的苹果设备都是把确定按钮放在右边的。因此无法判断被测试者在右边寻找确定按钮的习惯是出于本能还是对IOS系统的适应。个人认为，*系统规则*可能影响更大。

1.1K5 0

一件交互设计大事，确定按钮放在左还是右？

苹果说，不论移动或电脑设备，行动按钮（Action button）都放在右边，也就是说*确定按钮放在右边*：苹果的移动设备苹果的电脑设备微软说，除了删除之类的负向操作外，不论移动或电脑设备，*确定按钮放在左边...用来测试的是一个在iPad上展示的黑白简易网站：然而，这30人被分成A和B两组，A组先使用放在左边的确定按钮，再使用放在右边的确定按钮；B组先使用放在右边的确定按钮，再使用放在左边的确定按钮。...真正意想不到的是，在第二次选图时，如果按钮从左换到右边（A组），错误率稍有提升达到23.08%（3/13，注：减去了第一次出错的人）；如果确定按钮从右换到左边（B组），错误率竟然从第一步的0%冲到了*66.66%...所以，得出结论，只有确定按钮放在右边时，使用体验才是最顺畅的吗？这个结论，无法轻易得出。因为影响人们使用习惯的因素很多，例如设备、系统和载体等。...尤其是本实验使用iPad，而包括iPad在内的苹果设备都是把确定按钮放在右边的。因此无法判断被测试者在右边寻找确定按钮的习惯是出于本能还是对IOS系统的适应。个人认为，*系统规则*可能影响更大。

1.8K7 0

MPAndroidChart总结

true);//设置是否可以拖拽 lineChart.setScaleEnabled(true);//设置是否可以缩放 lineChart.setData(lineData);//设置数据 //此句放在...setData上面和下面的效果不相同放在上面 lineChart.setVisibleXRangeMinimum(10f);//设置x轴最少10个数据 //lineChart.setVisibleXRangeMaximum...xAxis.setEnabled(true);//设置是否启用x轴 //个人感觉上面两个方法效果是一样的 YAxis yAxisLeft=lineChart.getAxisLeft();//获取左边...yAxisLeft.setStartAtZero(true);//左边Y轴从0值开始 yAxisLeft.setDrawAxisLine(false);//是否绘制Y轴 yAxisLeft.setDrawLabels...默认是正方形 l.setFormSize(8f);//图例图标的大小 l.setTextSize(20f);//图例字体的大小 l.setTextColor(Color.BLACK);//图例字体的颜色

1.1K1 0

SAP QM 创建一个包含Multiple Specification的检验计划

然后点击创建按钮，进入如下界面，进入Quality Management标签页，把第一行勾选Multiple Specs, 如上图。...点击物料下的灯泡按钮， SAP系统进入如下界面，在Multiple Assignment Gen.标签页里维护如下数据：注意：SAP标准系统里Object(Mult.Specs)和Obj.Type...(MultSpecs)两列是在这个界面最右边。...需要拉动横向滚动条找到这2列，然后将其拖拽到如上图所示的比较靠左边的位置上，方便维护和显示数据。...，可以通过鼠标拖拽的方式将其放在比较靠左边的位置，即如上图示的位置上。

4222 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭