html - 如何将最后一个 <li> 放在我页面的右侧？

Question

我想将最后一个 li 移到右侧，但我的 CSS 不工作。

.gCountryFlag {
    margin-left: 0;
    padding-left: 0;
}
ul li {
    list-style: none;

}
.navbar-collapse ul li:last-child {
     float: right;
}
.gCountryFlag li {
    float: left;
    display: inline-block;
    margin: 5px;
}

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a runat="server" href="/">Home</a></li>
                <li><a runat="server" href="/About.aspx">About</a></li>
                <li><a runat="server" href="/Contact.aspx">Contact</a></li>
                <li>
                    <div class="flagChangeCountry">
                        <asp:Image CssClass="topFlag" runat="server" ID="currentCultureFlagImage" />
                        <%--<asp:Literal runat="server" Text="<%$Resources:LocalisedText, ChangeCountryText %>" />--%>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

我想将此图像移动到 div 中的右侧。在这里。

<li>
    <div class="flagChangeCountry">
        <asp:Image CssClass="topFlag" runat="server" ID="currentCultureFlagImage" />
        <%--<asp:Literal runat="server" Text="<%$Resources:LocalisedText, ChangeCountryText %>" />--%>
    </div>
</li>

此外，我想将旗帜图像与同一行中的其他文本对齐。这是旗帜外观的屏幕截图，它不是右侧的，也没有与其他文本对齐。

Answer 1

您只需为最后一个li 元素设置float: right。并且不要忘记 clearfix。

ul {
  border: 1px solid red;
  padding: 0;
  margin: 50px;
}

ul:after { 
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

li {
  float: left; /* all li items */
  
  padding: 0;
  margin: 0;
  border: 1px solid green;
  list-style: none;
}

li:last-child {
  float: right; /* last li item */
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>