Question

考虑一下：

<style>
a
{
    float:left;
    width:200px;
    text-align:center;
}
</style>
<div>
    <a>First</a>
    <a>Second</a>
    <a>Third</a>
</div>

这很有效，每个<a>都有正确的宽度。但是当我从其中一个<a>中删除文本时，宽度会丢失，而不是宽度为600px，我有400px。

如果3 <a>具有固定宽度且没有文字，我该怎么办？

我在我的应用程序中使用了很多jQuery，并且这些锚点中的文本发生了变化。

我找到了一种解决方法，方法是用\xA0替换文字，但我仍然可以点击它，我希望它被禁用。

Answer 1

这是因为元素最终没有height而没有任何内容。修复方法是指定高度：

a {
    float:left;
    width:200px;
    text-align:center;
    height:20px;
}

Answer 2

您应该将display: inline-block应用于这些锚点，以防止它们占用更少的空间。

Answer 3

您只需添加display:block;

即可

标签默认为display:inline;

Answer 4

您可以使用display：block作为样式标记。这是我的看法。 http://jsfiddle.net/DkL6F/

             <div>
                <a style="background:#FF433F;">&nbsp;&nbsp;</a>
                <a style="background:#F1F33F;">&nbsp;&nbsp;</a>
                   <a style="background:#F1B33F;">&nbsp;&nbsp;</a>
            </div>

                  a
            {
                 float:left;
                width:200px;
                 text-align:center;
           display:block;

                }

在没有文本的浮动元素上始终具有宽度

4 个答案: