Question

我想将最后一个li移到右上方，还需要与名为Home | About | Contact的菜单文本对齐，但我的CSS无效。

我的完整HTML可以在https://jsfiddle.net/g2upojoc/1/

找到

请告诉我在css代码中需要修改的内容。感谢

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

ul li {
  list-style: none;
}

.navbar ul {
  border: 1px solid red;
  padding: 0;
  margin: 50px;
}

.navbar ul:after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

.navbar li {
  float: left;
  /* all li items */
  padding: 0;
  margin: 0;
  border: 1px solid green;
  list-style: none;
}

.navbar li:last-child {
  float: right;
  /* last li item */
}

.gCountryFlag {
  margin-left: 0;
  padding-left: 0;
}

.gCountryFlag li {
  float: left;
  display: inline-block;
  margin: 5px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<form method="post" action="./default.aspx" id="ctl01">

  <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 href="/">Home</a></li>
          <li><a href="/About.aspx">About</a></li>
          <li><a href="/Contact.aspx">Contact</a></li>
          <li>
            <div class="flagChangeCountry">
              <img id="currentCultureFlagImage" class="topFlag" src="http://www.bba-reman.com/images/flags/us.gif" alt="English (United Kingdom)" />

            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container body-content">

    <br /><br />
    <a id="MainContent_hphome" href="/">Home</a>
    <a id="MainContent_hpabout" href="/About.aspx">About</a>
    <a id="MainContent_hpcontact" href="/Contact.aspx">Contact</a>
    <br /><br /><br /><br />

    <input type="submit" name="ctl00$MainContent$Button1" value="Button" id="MainContent_Button1" />

    <br /><br />

    <span id="MainContent_lbltext">Welcome to My WebSite</span>


    <hr />
    <footer class="navbar-fixed-bottom">
      <div id="footer_column6" class="col-md-12">
        <ul>
          <li class="countryTitle">Other Country</li>
          <li>

            <ul id="flag" class="gCountryFlag">

              <li>
                <a href="/de/default.aspx" title="BBA Reman DE" class="noclass">
                  <img src="http://www.bba-reman.com/images/flags/de.gif" alt="BBA Reman - DE Flag">
                </a>
              </li>

              <li>
                <a href="/fr/default.aspx" title="BBA Reman FR" class="noclass">
                  <img src="http://www.bba-reman.com/images/flags/fr.gif" alt="BBA Reman - FR Flag">
                </a>
              </li>
              <li>
                <a href="/gb/default.aspx" title="BBA Reman GB" class="noclass">
                  <img src="http://www.bba-reman.com/images/flags/gb.gif" alt="BBA Reman - GB Flag">
                </a>
              </li>

              <li>
                <a href="/us/default.aspx" title="BBA Reman US" class="noclass">
                  <img src="http://www.bba-reman.com/images/flags/us.gif" alt="BBA Reman - US Flag">
                </a>
              </li>

            </ul>
          </li>
        </ul>
      </div>
    </footer>

  </div>

</form>

Answer 1

在 li 中添加一个类，将其命名为＆＃34; lang-icon＆＃34; 并添加以下css：

.lang-icon{
  position: absolute !important;
  right: 0;
  top: 0;
}

祝你好运;）

如何将最后一个<li>放在我页面的右上角？

1 个答案: