html - 只有主页正确呈现？

Question

我在一个 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，一些解释？

Answer 1

内联列表项依赖于空格（就像 inline-block 元素一样） - 这意味着您的标记需要像这样：

<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>

摆脱它们之间的空间。

阅读此答案以获取更多信息：管理内联列表项之间空格的最佳方法