文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用普通的iOS和CSS2来模仿Android /CSS2正方形按钮？

问如何使用普通的iOS和CSS2来模仿Android /CSS2正方形按钮？
EN

Stack Overflow用户

提问于 2016-03-11 15:45:39

回答 2查看 675关注 0票数 0

这几乎是不可能的。

我正在尝试创建HTML/CSS只包含文本为中心的方形链接按钮，而不使用CSS3。

我尝试过在inline-block中找到关于以垂直为中心的文本的所有答案的变体，但我尝试的任何方法都不满足以下限制：

整个按钮元素必须是一个链接，而不仅仅是文本。
如果按钮元素的宽度不够宽，则按钮元素内的文本必须是垂直的和水平的中心，并很好地包装。
所有按钮的高度和宽度应相同。
如果浏览器的宽度缩小或不足以容纳所有按钮，则按钮必须是可横向并排的，并包装到下面的下一行。
为了确保与旧浏览器的兼容性，此解决方案必须而不是需要CSS3 (例如display:flex)。

想一想，就像iOS和Android主屏幕上的并排正方形按钮，但使用的却是简单而纯的HTML/CSS。阴影，渐变，反射是不必要的，只需要按钮结构。

我尝试过嵌套div，使用:before作为在inline-block中垂直对齐文本的技巧，我尝试过用display:table对行和单元格，甚至尝试了display:flex，但是使用了CSS3。没有解决方案，我尝试了符合上述所有标准。

所以我想知道，如果没有CSS3，这可能吗？如果是这样的话，有什么诀窍，就像我想的那样--这样的事情很容易就能实现？

hyperlink

vertical-alignment

html

css

button

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-03-11 16:05:10

是的，我相信这是可能的，但它使用了很多嵌套跨度！

这里使用的最疯狂的CSS是display: table和display: inline-block，所以我认为您应该非常安全。

body {
  font-family: sans-serif;
}
.special-button {
  display: inline-block;
  height: 100px;
  width: 100px;
  overflow: hidden;
  position: relative;
  background: #eee;
  color: #333;
  text-decoration: none;
}
.special-button:hover {
  background: #333;
  color: #fff;
}
.special-button-table {
  display: table;
  width: 100%;
  height: 100%;
}
.special-button-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 10px;
}

<a href="#" class="special-button">
  <span class="special-button-table">
    <span class="special-button-cell">Text Here</span>
  </span>
</a>

<a href="#" class="special-button">
  <span class="special-button-table">
    <span class="special-button-cell">Longer Text Item Here</span>
  </span>
</a>

<a href="#" class="special-button">
  <span class="special-button-table">
    <span class="special-button-cell">Text Here</span>
  </span>
</a>

<a href="#" class="special-button">
  <span class="special-button-table">
    <span class="special-button-cell">Really Really Long Text Item That Overflows Here</span>
  </span>
</a>

票数 3

Stack Overflow用户

发布于 2016-03-11 16:06:30

我可能错过了一些细节，因为一个非常快速的浏览阅读-让我知道这是多么遥远。

<style>
    .ios li {
        display: inline-block;
        background: #eee;
        padding: 5% 10px 20px 10px;
        width: 100px;
        max-width: 100px;
        height: 50px;
        max-height: 100px;
        vertical-align: top;
        text-align: center;
    }
</style>


<ul class="ios">
    <a href="test.com"><li>short text</li></a>
    <a href="test2.com"><li>much longer lot of text</li></a>
</ul>

票数 0

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

原文链接：

https://stackoverflow.com/questions/35944414

复制

相似问题

问如何使用普通的iOS和CSS2来模仿Android /CSS2正方形按钮？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用普通的iOS和CSS2来模仿Android /CSS2正方形按钮？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用普通的iOS和CSS2来模仿Android /CSS2正方形按钮？
EN