OR

Question

我有两个div应该看起来相同但不是。如果我遵循第一种方式的语法，div具有正确的宽度（60px），但如果我这样做，第二种方式只有44px。我需要使用第二种方式。为什么尺寸存在差异？

编辑：我也注意到如果我使用第二种方式，字母前后似乎没有间距。也许与填充有关..

第一种方式

<div id="item_2", onclick="location.href='http://www.facebook.com';" style="cursor:pointer;"> About </div>

第二种方式

<%= link_to "http://www.facebook.com", id:"item_2" do %> About <% end %>

CSS

#item_2 {
    width: 60px;
    padding-top: 11px;
    padding-bottom: 11px;
    text-decoration: none;
}

Answer 1

第一种方式

：你正在使用Div Tag，即Block level element。

以第二种方式：您正在使用（锚点）标记，即内联元素。

注意：内联元素宽度自动调整其内容，而不是通过CSS 如果要实现CSS宽度，则将其设置为块级别或设置浮动级别

用于使DIV标记内联的第一路CSS

#item_2 {
    display:inline;
    padding-top: 11px;
    padding-bottom: 11px;
    text-decoration: none;
}

================================

OR

用于制作锚标记块的第二路CSS

   #item_2 {
        display:block;
        width:60px;
        padding-top: 11px;
        padding-bottom: 11px;
        text-decoration: none;
    }

<强>更新你应该使用Seprately CSS作为Anchor Tag

方式1：全局锚标记

   a {
        display:block;
        width:60px;
        padding-top: 11px;
        padding-bottom: 11px;
        text-decoration: none;
    }

方式2

   a#item_2 {
        display:block;
        width:60px;
        padding-top: 11px;
        padding-bottom: 11px;
        text-decoration: none;
    }

方式3 给锚标签Seprate id或Class 例如

<a class='item_n' >Link</a>

CSS

.item_n {

            display:block;
            width:60px;
            padding-top: 11px;
            padding-bottom: 11px;
            text-decoration: none;
}

Answer 2

由于第二个示例是<a>而不是<div>，因此您应将其设为“display: block;”

检查此示例： http://jsfiddle.net/hige/7puyk/

划分不正确的尺寸可能是由于填充

2 个答案:

OR