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

Question

我想将最后li移到右侧，但我的CSS无效。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想将此图像移动到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

我会使用display: flex而不是浮点数。您可以在display flex中更好地控制元素。在显示屏中，您可以轻松调整框内的元素。使用flex grow来使元素更大或更小。

请查看此guide-to-flexbox。

Answer 2

您只需为最后float: right项设置li即可。不要忘记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>

Answer 3

尝试在课程.navbar-nav

中添加此内容

.navbar-nav {
    width: 100%;
}

.navbar-collapse ul li:last-child {      
    float: right;
}

这是因为bootstrap.css覆盖了你的css文件。

Answer 4

在设置clear:left;

之前，您是否尝试过float: right;

.navbar-collapse ul li:last-child {
         clear:left;
         float: right;
    }

Answer 5

您需要将宽度设置为ul，如下所示：

  ul{
    float:left;
    width: 100%;
  }

这是jsfiddle中的一个工作示例：

https://jsfiddle.net/d7dtm4we/

编辑：我将jsfiddle复制到代码段，并添加宽度100％vs没有设置宽度

.gCountryFlag {
    margin-left: 0;
    padding-left: 0;
}

ul.nav{
  margin: 0;
  padding: 0;
  float:left;
  width: 100%;
}

ul.nav2{
  margin: 0;
  padding: 0;
  float:left;
}

ul li {
    list-style: none;
    float:left;
    padding: 5px
}

ul li:last-child {
     float: right;
}

.gCountryFlag li {
    float: left;
    display: inline-block;
    margin: 5px;
}

            <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">
                      <img src="http://satyr.io/32x20?flag=gbr" />
                    </div>
                </li>
            </ul>
            <ul class="nav2 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">
                      <img src="http://satyr.io/32x20?flag=gbr" />
                    </div>
                </li>
            </ul>