Question

我知道这是一个非常愚蠢的问题，但到目前为止，我还在努力让这项工作取得成功。我使用一个免费生成它的在线网站制作了一个CSS菜单。所以第一个挑战是在每个选项之前放置一些图标，这个我获得了成功。但现在，我想在右侧放置一些按钮。让我来看看菜单的css代码：

@charset 'UTF-8';
/* Starter CSS for Flyout Menu */
#cssmenu,
#cssmenu ul,
#cssmenu li #cssmenu a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  font-family: Helvetica;
  line-height: 1;
}
#cssmenu {
  width: auto;
}
#cssmenu ul {
  zoom: 1;
  background: #547a65 url(/img/pattern.png) top left repeat;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #354d3f;
  -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul:before {
  content: '';
  display: block;
}
#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu a,
#cssmenu a:link,
#cssmenu a:visited {
  padding: 15px 20px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 -1px 1px #161f1a;
  border-right: 1px solid #354d3f;
}
#cssmenu a:hover {
  color: #161f1a;
  text-shadow: 0 1px 1px #69987e;
}
#cssmenu li {
  float: left;
  border-right: 1px solid #5e8972;
}
#cssmenu li:hover {
  background: #4a6b58 url(/img/pattern.png) top left repeat;
}
#cssmenu li:first-child {
  border-left: none;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}

#cssmenu li#homeicon a{
    background: url(/img/home.png) no-repeat;
    background-position: left;
}

#cssmenu li#cardicon a{
    background: url(/img/card.png) no-repeat;
    background-position: left;
}

#cssmenu li#billingicon a{
    background: url(/img/billing.png) no-repeat;
    background-position: left;
}

#cssmenu li#ticketicon a{
    background: url(/img/tickets.png) no-repeat;
    background-position: left;
}

好的，正如您所看到的，最后4个ID选择器是在按钮的文本前放置一个图标。但所有按钮都在左侧。我想制作一些按钮，如：LogOut，用户设置在右上角。制作菜单的HTML是：

<html>
<head>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body id="home">
<div id='cssmenu'>
<ul>
   <li id="homeicon" class='active'><a href='index.html'><span>Home</span></a></li>
   <li id="cardicon"><a href='#'><span>Information</span></a></li>
   <li id="billingicon"><a href='#'><span>Billing</span></a></li>
   <li id="ticketicon" class='last'><a href='#'><span>Tickets</span></a></li>
</ul>
</div>
</body>
</html>

我是这个语言的初学者，所以我很抱歉这个愚蠢的问题。谢谢！

Answer 1

如果您想避免上课，可以使用nth-last-child选择器：http://css-tricks.com/almanac/selectors/n/nth-last-child/并向右浮动

#cssmenu ul :nth-last-child(-n+2)  {float:right;}

Demo

Better Demo With Border Fixes

如果你正在使用ID，你也可以使用它们来漂浮。

Answer 2

给出正确的项目并将它们正确地浮动。例如，请看这个小提琴：http://jsfiddle.net/8Ena2/

#cssmenu ul li.right {float:right;}

带左右按钮的菜单

2 个答案: