html - 单独的内联列表

Question

我一直在尝试分离一个已经内联的列表，下面是 HTML 代码。

<div class="TopNavigation">
    <ul class="Separate">
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="index3.html">Tools</a></li>
    </ul>
</div>

这是 CSS 代码。

.TopNavigation a {
    color: Black;
    font-size: 15px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 20px;
}

.TopNavigation li {
    display: inline-block;
}

.TopNavigation {
    padding-top: 10px;
}

我希望“主页”位于页面左侧，“图库”和“工具”位于页面右侧。我该怎么做？

谢谢。

Answer 1

您可以将 float:right 分配给除列表的第一个 li 元素之外的所有元素:

.TopNavigation a {
    color: Black;
    font-size: 15px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 20px;
}

.TopNavigation li {
    display: inline-block;
}

.TopNavigation {
    padding-top: 10px;
}
.TopNavigation li:not(:first-of-type) {
  float:right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="TopNavigation">
    <ul class="Separate">
        <li><a href="index.html">Home</a></li>
<li><a href="index3.html">Tools</a></li>            
<li><a href="#">Gallery</a></li>
        
    </ul>
</div>