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

Html移动按钮显示
EN

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

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

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
复制
<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 16:18:19

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

HTML:

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

CSS:

代码语言:javascript
代码运行次数:0
运行
复制
.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

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档