文章/答案/技术大牛

发布

问菜单中左右都有按钮
EN

Stack Overflow用户

提问于 2014-05-27 23:30:46

回答 2查看 1K关注 0票数 0

我知道这是个很愚蠢的问题，但我很难做到这一点，到目前为止还没有成功。我用一个免费的在线网站制作了一个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>

我对这门语言非常熟悉，所以我对这个愚蠢的问题很抱歉。谢谢!

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-05-27 23:38:23

给正确的项一个类，并使它们正确浮动。例如，请参见这个小提琴：http://jsfiddle.net/8Ena2/

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

票数 0

Stack Overflow用户

发布于 2014-05-27 23:53:08

如果要避免类，可以使用nth-last-child选择器：http://css-tricks.com/almanac/selectors/n/nth-last-child/和向右浮动

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

演示

更好的边界修正演示

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23900574

复制

相似问题

问菜单中左右都有按钮
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问菜单中左右都有按钮EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问菜单中左右都有按钮
EN