Css 左右各有按钮的菜单_Css

Css 左右各有按钮的菜单

css

Css 左右各有按钮的菜单,css,Css,我知道这是一个相当愚蠢的问题，但我正在努力让它工作，到目前为止还没有成功。我使用一个免费生成CSS菜单的在线网站制作了一个CSS菜单。所以第一个挑战是在每个选项前放置一些图标，这一个我成功了。但是现在，我想把一些按钮放在右边。让我向您展示菜单的css代码： @charset 'UTF-8'; /* Starter CSS for Flyout Menu */ #cssmenu, #cssmenu ul, #cssmenu li #cssmenu a { list-style: none;

我知道这是一个相当愚蠢的问题，但我正在努力让它工作，到目前为止还没有成功。我使用一个免费生成CSS菜单的在线网站制作了一个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选择器是在按钮文本之前放置一个图标。但是所有的按钮都在左边。我想做一些按钮，如：注销，用户设置在右边的拐角处。制作菜单的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>

我是这门语言的初学者，所以我为这个愚蠢的问题感到抱歉。

谢谢大家!

给正确的项目一个类，并使它们正确浮动。例如，请看这把小提琴：

如果要避免类，可以使用

n个最后一个子项

选择器：并向右浮动

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

如果您使用的是ID，您也可以使用ID向右浮动。

简单直接。。。我几乎做到了，但我错过了“ul”和“.”。。。不管怎样，一切都很好！非常感谢。

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