Question

这是HTML：

<a href="#" class="square1"></a>

对应的css是：

a.square1
{
    width: 50%;
    height: 50%;
    border: 1px solid transparent;
    padding: 9%;
    margin-top: 0%;
    background-color: #FAFAFA;
    opacity: 0.5;
}

当我尝试将文本放入其中时，方块的大小会发生变化。我怎么能避免这种情况？

Answer 1

首先，你的锚元素不是正方形。给予width: 50%和height: 50%并不能使其成为正方形。它只计算与其父元素相关的元素的宽度和高度。您应该提供固定值而不是百分比值。并使用display: block将内联锚元素转换为块元素。

a.square1
{
    width: 100px;      /* fixed value */
    height: 100px;     /* fixed value */
    border: 1px solid red;
    padding: 9%;
    display: block;    /* converted to block element */
    margin-top: 0%;
    background-color: #FAFAFA;
    opacity: 0.5;
}

<强> Working fiddle

布局似乎是响应方形元素，因为填充值以百分比表示，因为以百分比表示的填充顶部或底部值分别对应于宽度而不是高度。

注意：您还可以使用vh / vw单位（适用于现代浏览器）。使用的后退是，无论是调整宽度还是调整高度，它都会起作用，但不会对两个尺寸调整大小。

例如：

width: 20vh; height: 20vh; //works for height resizing

和

widdth: 20vw; height: 20vw; //works for width resizing

Answer 2

当我做了一些测试网站时;按钮大小（没有任何编辑）主要取决于文本的长度和字体大小。您可能需要更改文本的字体来解决此问题。

添加文字（我想你知道这一点，但只是为了澄清）

<p id="IDHERE" style="font-size:50%">TextHere</p>

您可以添加更多CSS代码;只要确保它足够小。

添加文本时方块的大小会发生变化

2 个答案: