Html移动按钮显示
Html移动按钮显示
提问于 2015-01-15 08:42:00
我正在开发一个用HTML、CSS和JS构建的增量游戏。我一直在使用建筑物和其他可点击功能的按钮。它们在笔记本电脑或台式机上看起来很合适，但在平板电脑或手机上查看时，这些按钮只显示一行文本。
如何使按钮在移动设备上的显示方式与其在台式计算机上的显示方式相同？
编辑:不是100%确定是哪个移动浏览器，但我猜是chrome。(一个朋友在他的iPhone上试过，另一个在他的平板电脑上也有同样的问题)。目前还没有任何css影响按钮。
这张图片显示了我的意思：
下面是使用的确切html代码：
<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>
回答 1
Stack Overflow用户
发布于 2015-01-15 16:18:19
在您的例子中，我不会使用默认的按钮标记。要让它在所有浏览器/手机上看起来都一样，你可以使用简单的div样式。如果你使用默认的按钮标签，它在一些(手机)浏览器上会显示不同。如果你需要任何帮助来设计你自己的“自定义”按钮。请随时提问。
HTML：
<div class="building" onclick="myfunction();">
<!-- your content here -->
</div>CSS：
.building {
cursor: pointer;
background-color: #AFAFAF;
color: #000000;
width: 200px;
height: 70px;
float: left;
margin: 5px;
}
.building:hover {
background-color: #8F8F8F;
color: #111111;
}当然，你必须根据你的喜好来调整CSS。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27955077
复制相关文章
相似问题
腾讯云开发者
