8

次のレールコードがあります

<%= link_to mypath do %>
    <%= content_tag(:i, "" ,:class=>' icon-eye-open' %>
<% end %>
<%= @num %>

htmlを生成する

<a href="/mypath">
    <i class=" icon-eye-open"></i>
</a>
100

問題は、jsfiddle hereに見られるように、アイコンの上にマウスを置くと、数字とアイコンの間に下線が引かれたスペースがあることです。スペースは視覚的な目的で必要ですが、CSS を使用せずにリンクの下線を削除するにはどうすればよいですか?

なぜなし？特定または汎用のいくつかのcssセレクターに対して行うことができますがtext-decoration: none;、この下線が発生する理由を理解したいと思います。が削除された場合、@num下線はなくなり、アンカー タグの外側にあるため、影響を受けないはずです。それでも、明らかにそうです。

4

1 に答える 1

12

これは、の後の空白が原因で発生しています</i>

jsFiddle のコードを次のように切り替えてみてください。

<a href="/mypath"><i class=" icon-eye-open"></i></a>100

問題は解決します。

これは、<i>要素がインライン(またはむしろinline-block ) であるためです。これは、原則として、空白が重要であることを意味します。

タグの後に ERB が改行を含めないようにするには、末尾の で閉じます-%>。つまり、次のようになります。

<%= content_tag(:i, "" ,:class=>' icon-eye-open' -%>
于 2013-06-05T04:04:35.187 に答える