2

私は MVC プロジェクトで 6 か月以上働いていますが、その間ずっと html css で同じ問題を抱えていました。ホームページが正しくレンダリングされました。例: http://prntscr.com/tucp1

他のすべてのページには、単語間に空白があります。例: http://prntscr.com/tucui HTML の一部:

<div class="search right">
    <div class="nav">
        <ul>
            <li><a>Nav1</a></li>
            <li><a>Nav2</a></li>
            <li><a>Nav3</a></li>
        </ul>
    </div>

私のCSSの一部：

.nav ul li {
line-height: 27px;
display: inline;
float: left;
list-style-type: none;

.nav ul li a {
color: #424242;
padding: 0 10px;
font-weight: bold;
}

そして昨日、私はliにフロートが残っていないことに気づきました。私は内側のページでテストしていたので、問題を簡単に見つけました... hompepageだけが正しくレンダリングされる方法を知っている人はいますか?

4

1 に答える 1

1

インライン リスト アイテムは、(インライン ブロック要素と同様に) 空白に依存します。つまり、マークアップは代わりに次のようにする必要があります。

<div class="search right">
<div class="nav">
    <ul>
        <li><a>Nav1</a></li><li><a>Nav2</a></li><li><a>Nav3</a></li>
    </ul>
</div>

それらの間のスペースを取り除くため。

詳細については、この回答をお読みください:インライン リスト項目間の空白を管理する最善の方法

于 2013-02-23T15:17:09.960 に答える