UniGui使用CSS移动端按钮标题垂直

最新推荐文章于 2024-01-29 14:30:00 发布
最新推荐文章于 2024-01-29 14:30:00 发布
阅读量688 收藏 8
点赞数 11
分类专栏： UniGui 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/delphigbg/article/details/134890587
版权

unigui移动端中按钮拉窄以后，标题无法垂直居中，是因为标题有一个padding属性，在四周撑开一段距离。会变成这样：

UniGui使用CSS(1)移动端按钮标题垂直

解决方法，用css修改padding，具体做法如下

首先给button的cls创建一个cls,例如

UniGui使用CSS(1)移动端按钮标题垂直

然后添加css，老规矩，添加css的方法有两种一种在servermodule的customcss里添加，一种是使用自定义css文件添加，此处以第一种方法演示

UniGui使用CSS(1)移动端按钮标题垂直

UniGui使用CSS(1)移动端按钮标题垂直

把按钮设高一些，btn的height设置成60

UniGui使用CSS(1)移动端按钮标题垂直

蝈蝈(GuoGuo)
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
uniGUI从入门到精通功能演示
m0_57781768的博客
06-09 805
uniGUI是一个强大的Web应用程序开发框架，它将Delphi的桌面应用程序开发模式扩展到Web应用程序开发，使得开发人员可以使用熟悉的Delphi编程语言和工具来创建高性能的Web应用程序。uniGUI的出现，使得开发人员无需掌握复杂的Web技术即可开发出功能丰富的Web应用。本文将详细介绍uniGUI的基本概念、安装配置、核心组件及其使用方法，并通过具体的实例展示如何从入门到精通地使用uniGUI进行Web应用程序开发。
unigui_animate.css按钮动画完善
11-18
本主题聚焦于"unigui_animate.css按钮动画完善"，这意味着我们将讨论如何使用animate.css库来增强Unigui中按钮的视觉效果和交互性。 Animate.css是一个流行的开源CSS库，它包含了一系列预先定义好的动画效果，可以...
unigui美化界面源码框架
热门推荐
宁静志远
08-09 2万+
对于delphier来说，用delphi开发web程序，一直是一个很头痛的问题，在ui界面上要想漂亮，要学习css和美工知识，很多人都不得不放弃了。unigui是一个很好的框架，和delphier原生框架一样，拖放控件就能实现web开发，界面也相对原始的delphi控件来说，有一定的美化，但是还是和主流的web设计比较大。我花了大量的时间，修改了unigui控件的样式，写了这个web美化框架，符合...
Unigui开源框架，非常值得参考学习
03-19
Unigui开源框架，非常值得参考学习
unigui是什么？能用来干什么？一篇文章让你全面了解
宁静志远
06-02 3628
很多初次接触unigui的delphier都不太明白他的特点，能干些什么，这里就自己的经验，做个记录，分享给大家。
UniGUI 后台管理系统框架
u011702398的博客
04-19 3064
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
菜菜侠的uniGUI使用笔记 -- 几个重要模块单元
最新发布
菜菜侠的博客
01-29 1540
虽然uniGUI的开发类似于Delphi的VCL开发，但是还是有一些区别的， 在某些方面使 uniGUI Web 应用程序与桌面应用程序不同。桌面应用程序设计为在桌面上作为单个实例运行，它可以使用所有可用的系统资源。大多数情况下，这将导致糟糕的应用程序设计，因为开发人员认为没有必要优化资源使用。随着计算机技术的进步，新系统在每种新模型中都拥有更多资源。几年前，具有 128mb RAM 的 PC 被认为是入门级的，而今天这个限制已升级到至少 2 GB 的内存。
基于UniGUI的管理系统
musa2008的专栏
04-23 2413
基于UniGUI的管理系统 delphi MySQL MSSQL
html+css 移动端商城网页设计实现
04-27
在本文中，我们将深入探讨如何使用HTML5和CSS来实现移动端商城网页的设计。移动商城网站是现代电子商务不可或缺的一部分，它们提供了便捷的购物体验，让用户在手机和平板电脑上也能轻松浏览和购买商品。我们将逐一...
unigui_css引用路径
12-10
在Unigui开发中，CSS（层叠样式表）的引用路径是至关重要的，它决定了应用程序界面的样式表现。Unigui是一个基于Delphi的Web应用程序框架，它允许开发者使用Delphi的VCL组件来创建Web应用，同时支持HTML5、CSS3和...
unigui_animate.css动画按钮
11-17
在这个场景中，我们关注的是"unigui_animate.css动画按钮"，这是一个利用Animate.css库来实现按钮动画效果的例子。Animate.css是一个流行的CSS库，包含了大量的预定义动画，可以方便地添加到网页元素上，为用户交互...
unigui开发文档，特别详细
12-26
UNIGUI开发文档，我收集了好长时间，里面有开发遇到的各种解决办法。
html+css移动端视口总结
05-09
HTML 和 CSS 在移动端开发中扮演着至关重要的角色，它们共同决定了网页在不同设备上的呈现效果。本文主要讨论了移动端开发中的几个核心概念：移动端设备、设备像素比（DPR）、以及视口布局。 首先，移动端指的是...
UniGUI 之UniDBGrid
GuoGuoABC
12-16 1926
/DisplayValues存储显示文字 ,不设置 则 显示 True/False;.GridLotacao .x-grid-column {/*带元素id的属性（设置栏），在unidbgrid中的layoutconfig属性中的cls子属性中加入GridLotacao名称*/.GridLotacao .x-grid-cell {/*带元素id的属性（设置单元格），在unidbgrid中的layoutconfig属性中的cls子属性中加入GridLotacao名称*/// 一定为True;
菜菜侠的uniGUI使用笔记 -- 基础篇
菜菜侠的博客
01-27 1572
刚开始学习与使用uniGUI时，往往是一头雾水，不知道如何下手，本篇的目的是记录我在学习与使用uniGUI过程中一些重点、要点，也希望能帮助到跟我一样的老Delphi粉丝。
菜菜侠的uniGUI使用笔记 -- 安装篇
菜菜侠的博客
01-26 1904
本文介绍了uniGUI的安装及使用Delphi开发第一个B/S程序。uniGUI框架对于Delphi老朋友想要开发B/S程序，绝对是一种福音。
【一起学UniGUI】--UniGUI的界面与程序架构(4)
06-10 4531
1、【统一的界面】 uniGUI是统一的图形用户界面，简称统一GUI。之所以称为统一的是因为它在所有带有Web浏览器的设备中提供了相同的UI体验。无论设备、操作系统、CPU和显示器是什么，在所有具有兼容Web浏览器的设备上，用户体验都是相同的。它允许在选择客户端设备方面有很大的自由。客户端设备可以是Windows PC、OSX设备、Linux PC、智能手机、平板电脑，甚至是树莓派...
用unigui来制作网站
宁静志远
08-20 1308
用unigui来制作网站，核心是运用好控件布局。
UNIGUI的自适应屏幕
daigua1987的博客
08-25 647
Unigui
css移动端布局练习
09-16
CSS移动端布局练习是用于设计和开发适应移动设备的网页的练习。移动设备的屏幕尺寸较小，需要针对不同尺寸的设备进行响应式布局，以保证页面在不同设备上的显示效果和用户体验。 在进行CSS移动端布局练习时，需要注意以下几点： 1. 使用媒体查询：媒体查询是CSS中的一种技术，它可以根据设备的屏幕尺寸和其他特性来调整页面的布局和样式。我们可以使用@media规则来设置不同屏幕尺寸的样式，以实现响应式布局。 2. 弹性盒子布局：弹性盒子布局（Flexbox）是CSS中一种用于创建灵活的、自适应的布局的技术。它可以使元素在容器内自动调整大小和位置，适应不同尺寸的屏幕。使用弹性盒子布局可以更方便地实现移动端页面的布局。 3. 隐藏不必要的元素：在移动端页面中，由于屏幕尺寸有限，可能需要隐藏一些不必要的元素，以提升页面的加载速度和用户体验。可以使用CSS的display属性来隐藏或显示元素。 4. 触摸事件：移动设备上常用的交互方式是通过触摸屏幕来实现的。在移动端布局练习中，可以利用CSS的伪类选择器（:hover）和触摸事件来添加交互效果，如改变按钮的背景颜色或是显示隐藏的菜单等。 通过不断练习和实践，可以提高在移动端布局方面的能力和经验，更好地适应移动设备的页面设计和开发工作。同时，学习和了解最新的CSS技术和移动端设计趋势也是很重要的，以便在实践中使用到新的技术和方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蝈蝈(GuoGuo)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值