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上，正如评论中指出的那样，可能是因为你的CSS中其他地方的a标签有一些默认宽度

试试这个：

<%= 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是一个块，a被视为一个范围）。我已经尝试过为此寻找参考资料，this Wikipedia是我能找到的最好的

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

Div大小的变化取决于我是否使用＆＃34; div＆＃34;或＆＃34; link_to＆＃34;

1 个答案: