如何用 HTML 和 CSS2 模仿 Android / iOS 方形按钮？

Question

这似乎几乎不可能。

我正在尝试创建 HTML/CSS-only 正方形 link 按钮，其中文本居中且不使用 CSS3。

我已经尝试了所有我能找到的关于 inline-block 中垂直居中文本的答案的变体，但我尝试的任何一个都不满足以下限制：

整个按钮元素必须是 link，而不仅仅是文本。
如果按钮元素的宽度不够宽，按钮元素内的文本必须垂直和水平居中并很好地换行。
所有按钮的高度和宽度应该相同。
如果浏览器的宽度减小或不足以容纳所有按钮，按钮必须水平并排放置并换行到下一行。
为确保与旧版浏览器的兼容性，此解决方案必须而非需要CSS3（例如display:flex）。

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

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

所以我想知道，如果没有 CSS3，这是否可行？如果是这样，我认为这样的事情本来可以非常简单地完成，有什么诀窍？

Answer 1

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

这里使用的最疯狂的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>

Answer 2

由于快速浏览，我可能错过了一些细节 - 让我知道这有多远。

<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>

如何用 HTML 和 CSS2 模仿 Android / iOS 方形按钮？

How to Mimic Android / iOS square buttons with plain HTML and CSS2?

html

css

button

hyperlink

vertical-alignment