首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Html移动按钮显示

Html移动按钮显示
EN

Stack Overflow用户
提问于 2015-01-15 00:42:00
回答 1查看 1K关注 0票数 1

我正在开发一个用HTML、CSS和JS构建的增量游戏。我一直在使用建筑物和其他可点击功能的按钮。它们在笔记本电脑或台式机上看起来很合适,但在平板电脑或手机上查看时,这些按钮只显示一行文本。

如何使按钮在移动设备上的显示方式与其在台式计算机上的显示方式相同?

编辑:不是100%确定是哪个移动浏览器,但我猜是chrome。(一个朋友在他的iPhone上试过,另一个在他的平板电脑上也有同样的问题)。目前还没有任何css影响按钮。

这张图片显示了我的意思:

下面是使用的确切html代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<button onclick="buyDirtHut()">
  Buy Dirt Hut<br />
  Each Dirt Hut gives you 2 population per second<br />
  Dirt Huts: <span id="dirtHuts">0</span><br />
  Dirt Hut Cost: <span id="dirtHutCost">1000</span> Gold
</button>

EN

回答 1

Stack Overflow用户

发布于 2015-01-15 08:18:19

在您的例子中,我不会使用默认的按钮标记。要让它在所有浏览器/手机上看起来都一样,你可以使用简单的div样式。如果你使用默认的按钮标签,它在一些(手机)浏览器上会显示不同。如果你需要任何帮助来设计你自己的“自定义”按钮。请随时提问。

HTML:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="building" onclick="myfunction();">
   <!-- your content here -->
</div>

CSS:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.building {
     cursor: pointer;
     background-color: #AFAFAF;
     color: #000000;
     width: 200px;
     height: 70px;
     float: left;
     margin: 5px;
}

.building:hover {

     background-color: #8F8F8F;
     color: #111111;

}

当然,你必须根据你的喜好来调整CSS。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27955077

复制
相关文章
web移动端左滑显示操作按钮
体验地址 https://codepen.io/klren0312/full/PoYWJgM 示例 2 代码 <!DOCTYPE html> <html lang="en"> <head> <me
治电小白菜
2020/08/25
9360
web移动端左滑显示操作按钮
【HTML】HTML 表单 ② ( 按钮表单 | 普通按钮 | 提交按钮 | 重置按钮 | 图片按钮 | 文件域 )
将 <input /> 标签 的 type 属性设置为 button , 就可以将该 表单组件 设置为 普通按钮 类型表单 ;
韩曙亮
2023/03/30
8.1K0
【HTML】HTML 表单 ② ( 按钮表单 | 普通按钮 | 提交按钮 | 重置按钮 | 图片按钮 | 文件域 )
html.dropdownlistfor_html按钮样式
var parents = _MemberEditDTOService.GetParents();
全栈程序员站长
2022/09/27
4.6K0
UGUI系列-鼠标移动到按钮上显示信息(Unity3D)
有时候图标不能很好的说明这个功能的解释,就需要一些说明性文字显示。就比如可以在鼠标移动到UI上面的时候显示文字。 那么如何在UGUI上,鼠标移动上去显示文字说明呢。 大家都知道,当鼠标移动到button按钮上面的时候会出现变化,主要是button这个组件在控制
恬静的小魔龙
2022/08/07
1.2K0
UGUI系列-鼠标移动到按钮上显示信息(Unity3D)
Excel实战技巧65: 制作漂亮的用户窗体按钮——当鼠标移动到按钮上时高亮显示
在很多场合,我们都能看到这样的效果,当鼠标移动到某个元素上面时,该元素会变成另外一种颜色,达到强调的效果。下面,我们来实现当鼠标移动到用户窗体按钮上时,会使用颜色高亮显示,让用户窗体更生动,如下图1所示。
fanjy
2019/12/04
8.6K0
PyQt5 技巧篇-按钮竖排显示方法,Qt Designer设置按钮竖排显示。
其实很简单,只要设置按钮显示的文字每个字后面加一个\n换行符,并把按钮拉高就好了。 例:"上\n一\n页"
小蓝枣
2020/09/23
1.7K0
鼠标悬浮button按钮显示tip
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin: 0px; padding: 0px; } body { text-align: center;
西柚dzh
2022/06/09
2.6K0
炫彩流光按钮 CSS + HTML
炫彩流光按钮 写在前面 你若要喜爱你自己的价值,你就得给世界创造价值。——歌德 效果图 三个绝美的样例 HTML代码 <div class="box"> <button clas
小丞同学
2021/08/16
3.8K0
html点击按钮拨打电话
在进行移动版开发过程中,有时候页面上会留下商家的电话,用户点击电话或者电话旁边的小电话图标即可实现拨打电话的功能,这样省却了用户拨号的麻烦。下面我来介绍一下如何在html页面上点击调出拨打电话功能。
OECOM
2020/07/01
4.3K0
django admin 给 字段 增加 HTML 样式(显示图片、设置字体颜色、超链接、按钮等)
django admin 后台样式默认情况下都是默认的样式,有时候我们需要在 admin 显示一张图片、或者更改一个文案的显示颜色等等,该怎办呢?
卓越笔记
2023/02/18
3K0
django admin 给 字段 增加 HTML 样式(显示图片、设置字体颜色、超链接、按钮等)
Html的空格显示
全角空格被解释为汉字,所以不会被被解释为HTML分隔符,能够依照实际的空格数显示。
全栈程序员站长
2022/07/11
3.6K0
gridview分页显示_html分页显示数据
.gv { border: 1px solid #D7D7D7; font-size:12px; text-align:center; } .gvHeader { color: #3F6293; background-color: #F7F7F7; height: 24px; line-height: 24px; text-align: center; font-weight: normal; font-variant: normal; } .gvHeader th { font-weight: normal; font-variant: normal; } .gvRow, .gvAlternatingRow, .gvEditRow { line-height: 20px; text-align: center; padding: 2px; height: 20px; } .gvAlternatingRow { background-color: #F5FBFF; } .gvEditRow { background-color: #FAF9DD; } .gvEditRow input { background-color: #FFFFFF; width: 80px; } .gvEditRow .gvOrderId input, .gvEditRow .gvOrderId { width: 30px; } .gvEditRow .checkBox input, .gvEditRow .checkBox { width: auto; } .gvCommandField { text-align: center; width: 130px; }
全栈程序员站长
2022/09/29
5.7K0
gridview分页显示_html分页显示数据
iOS 左滑按钮(UITableViewRowAction)显示图片
1、 找到UITableViewRowAction里面的字view,里面有一个button,我们加的文字就加在上面。
星宇大前端
2019/01/15
2.7K0
iOS 左滑按钮(UITableViewRowAction)显示图片
1、 找到UITableViewRowAction里面的字view,里面有一个button,我们加的文字就加在上面。
星宇大前端
2022/05/06
1.4K0
iOS 左滑按钮(UITableViewRowAction)显示图片
Html动态点击按钮实现“+”和“-”功能
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/147257.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/01
3.8K0
Html动态点击按钮实现“+”和“-”功能
iOS 统一设置返回按钮图片 返回按钮标题不显示
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIAppli
iOSDevLog
2018/07/19
2.2K0
如何在html页面显示html标签源码
这是一篇不正经实现方案报道。 1 引言 先来看个问答: stackoverflow: Why was the xmp HTML tag deprecated? [duplicate] 这个问题感觉
celineWong7
2020/11/05
11.5K0
让一段HTML代码显示在桌面端网页而在移动端隐藏
这段代码的意思是当屏幕宽大小大于768px时执行{}内的css样式,即class名为id_name显示。
可定
2020/04/20
1.5K0
Hexo -21- iframe 增加全屏显示按钮
在 Hexo 网页中经常会用到 iframe 模块插入想要显示的内容,由于主题限制,内容只能在博客内容区显示。本文记录为iframe 增加全屏按钮的方法。 方案思路 确定 iframe 块的 id 使用 JavaScript 控制该 id 的全屏行为 设置按钮控制开关 解决方案 js 代码 <script> /** * 进入全屏 * @param element */ function requestFullScreen(element) { v
为为为什么
2022/08/04
1.2K0
Hexo -21- iframe 增加全屏显示按钮
网页一键分享按钮HTML代码
<div class="bdsharebuttonbox"> <a href="#" class="bds_more" data-cmd="more"></a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_tqq" data-cmd="t
闻语博客
2021/01/21
5.4K0

相似问题

HTML移动按钮显示/隐藏几秒钟后

21

在移动设备上不同显示按钮的HTML颜色

21

在HTML上移动按钮

110

提交按钮移动- CSS HTML

21

播放HTML音频按钮,点击移动

15
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文