html - Div 大小的变化取决于我使用的是 "div"还是 "link_to"

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

问题将出在 CSS 上，正如评论中所指出的，可能是由于您的 a 标签在您的 CSS 其他地方有一些默认宽度造成的

试试这个:

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

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

您还需要知道的是 div 和 a 标签在默认情况下的工作方式不同(div 是一个 block ，而 a 被视为一个跨度)。我已经尝试为此寻找引用资料，并且 this Wikipedia是我能找到的最好的

另一件事是 id 样式不会取代 class 样式。这只是一种专门识别元素的方法。所以你可能有类样式(在 div 或 a 类上)，这将优先