css - 文字列の一部のハイパーリンクを取得する方法 - navbar "li"

Question

ナビゲーションバーの「li」に文字列（「ようこそユーザー名」など）を表示したいのですが、「ユーザー名」のみがハイパーリンクです。

    <li>Welcome <a href="/users/username">username</a></li>

「ようこそユーザー名」 <- このように。

ナビゲーションバーでこれを行うと、文字列「ようこそユーザー名」が2行に分割されます

フィドルを見てください：

http://jsfiddle.net/9ywsY/7/show

解決済み: http://jsfiddle.net/9ywsY/12/show

Answer 1

.nav li a { display: inline-block;}

Answer 2

.nav > li > a {
    display: inline;
}

インライン ブロックは、すべてのブラウザーでうまく機能するとは限りません :)

または、本当にブロックにしたい場合は、アンカータグ内にすべてのテキストを入れることができます

<ul>
      <li><a href="/users/username">Welcome username</a></li>
</ul>