1

我一直想知道在 div 中放置文本的“最佳”方式是什么

1）在文本周围的元素上放置填充，并从元素的高度/宽度中减去填充。

<div class="button">
    Activate
</div><!-- button -->

.button
{
    height: 20px;   /* -10px from padding for text */
    width: 90px;    /* -10px from padding for text */
    padding-left:10px;
    padding-right:10px; 
}

2）在文本周围放置一个跨度，并将其定位为自己的元素。

<div class="button2">
    <span class="button2-text">
        Activate
    </span>
</div><!-- button2 -->

.button2
{
    height: 30px
    width: 100px
}
.button2-text
{
    padding-left:10px;
    padding-top:10px;
}

我总是选择 1)，因为它的代码更少，但我觉得 2) 更合适或者想知道我是否以任何方式使用方法 1) 是错误的。

4

3 回答 3

2

您的第二个选项不会将高度/宽度与填充混合。

如今的浏览器都遵循相同的盒子模型（这是您在选项 1 中的定位方式）。这相当于拥有box-sizing: content-box.

Internet Explorer 最高 6 版本和 Quirks 模式没有，而是使用了替代方案，其中包括填充作为宽度的一部分，相当于box-sizing: border-box.

为了正确定位两种模型，使用选项 2 是最安全的。

如果您检查http://jsfiddle.net/stb5a/，box-sizing则设置为content-box. 将其更改为border-box不会更改文本的位置；

所以基本上，选项 2 将用于与旧版本的 Internet Explorer（现在几乎没有了）的兼容性，以及用于为这些版本编码的开发人员，使用与他们一直做的相同的模式。

于 2012-06-22T22:14:31.337 回答
1

最好的方法是使用<button>

jsBin 演示

<button class="button">Activate</button>

CSS：

  .button{
    border: 1px solid #888;
    background:#eee;
    padding:5px 30px;
    border-radius:4px;
  }

而且您将有空闲时间玩颜色:)

于 2012-06-22T22:14:01.243 回答
-1

我会选择 1) 。2）<span>标签在语义上是无用的。除非您没有其他内容，否则<div>不要编译您的标记。

KISS - 保持简单愚蠢

于 2012-06-22T22:13:48.540 回答