Question

我是CSS的新手，我正在尝试更改wordpress模板，以便将导航菜单的最后一项向右移动。我正在使用以下代码段：

.menu-item-60146
{
      float:right;
}
/*
But i see no result

When i use the following code the navigation menu moves to the right but i need to move one item.

.boxwp-nav-secondary
{
      float:right;
}
What do i have to do to move an item to the right?
*/

<nav>
<ul id="boxwp-menu-secondary-navigation" class="boxwp-secondary-nav-menu boxwp-menu-secondary boxwp-secondary-responsive-menu">

<li id="menu-item-60147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60147"><a href="https://www.website.com/wp-login.php?action=logout">Logout</a></li>

<li id="menu-item-60175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60175"><a href="https://www.website.com/favorites/">Favorites</a></li>

<li id="menu-item-60946" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60946"><a href="https://www.website.com/price-finder/">Price</a></li>

<li id="menu-item-70793" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70793"><a href="https://www.website.com/">Finder</a></li>

<li id="menu-item-60146" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60146"><a href="https://www.website.com/blog/home/contact/">Contact</a></li>

</ul>
</nav>

Answer 1

我对您的代码做了一些更改，以对ul和li使用标准样式。随意用一个类替换ul和li并设置该类的样式。

这是您代码的有效版本。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

.menu-item-60146 {
float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

<ul id="boxwp-menu-secondary-navigation" class="boxwp-secondary-nav-menu boxwp-menu-secondary boxwp-secondary-responsive-menu">

<li id="menu-item-60147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60147"><a href="https://www.website.com/wp-login.php?action=logout">Logout</a></li>

<li id="menu-item-60175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60175"><a href="https://www.website.com/favorites/">Favorites</a></li>

<li id="menu-item-60946" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60946"><a href="https://www.website.com/price-finder/">Price</a></li>

<li id="menu-item-70793" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70793"><a href="https://www.website.com/">Finder</a></li>

<li id="menu-item-60146" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60146"><a href="https://www.website.com/blog/home/contact/">Contact</a></li>

</ul>

Answer 2

just float：right最后一个ID。另外，只是一个建议，研究一下flexbox值得学习，这样可以节省您数小时的时间。

#menu-item-60146
{
      float:right;
}
/*
But i see no result

When i use the following code the navigation menu moves to the right but i need to move one item.

.boxwp-nav-secondary
{
      float:right;
}
What do i have to do to move an item to the right?
*/

<nav>
<ul id="boxwp-menu-secondary-navigation" class="boxwp-secondary-nav-menu boxwp-menu-secondary boxwp-secondary-responsive-menu">

<li id="menu-item-60147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60147"><a href="https://www.website.com/wp-login.php?action=logout">Logout</a></li>

<li id="menu-item-60175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60175"><a href="https://www.website.com/favorites/">Favorites</a></li>

<li id="menu-item-60946" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60946"><a href="https://www.website.com/price-finder/">Price</a></li>

<li id="menu-item-70793" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70793"><a href="https://www.website.com/">Finder</a></li>

<li id="menu-item-60146" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60146"><a href="https://www.website.com/blog/home/contact/">Contact</a></li>

</ul>
</nav>

导航菜单将一项向右对齐

2 个答案: