单独的内联列表

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

我希望“Home”位于页面左侧，“Gallery”和“Tools”位于页面右侧。我该怎么做？

谢谢。

Answer 1

除了列表的第一个li元素外，您可以向所有人float:right提供帮助：

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

Answer 2

使用父项上的text-align:right将左侧的列表项对齐，将第一个子项浮动到左侧。

＆＃13;

＆＃13;

.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;
}
.Separate {
  text-align: right;
}
.TopNavigation li {
  display: inline-block;
  list-style: none;
}
.TopNavigation li:first-child {
  float: left;
}
.TopNavigation {
  padding-top: 10px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

将列表分成两部分并相应地对齐

＆＃13;

＆＃13;

.TopNavigation {
  display: inline-block;
  padding-top: 10px;
  width: 100%;
}
.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 .left {
  float: left;
}
.TopNavigation .right {
  float: right;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;