Question

我一直在尝试仅使用css类成员在列表的右侧附加一个图标。

http://codepen.io/anon/pen/QwgqVp?editors=110

所以当我将名为'location'的类附加到所需列表时，它应该在右侧显示一个图标，如下所示：

Edited image to demonstrate the desired result

我尝试使用float：right;但它只是将我的列表与下一个列表叠加在一起..

ul.listb li.location{
    content: '\f124'; /* FontAwesome char code inside the '' */
    font-family: FontAwesome; /* FontAwesome or whatever */
    /*this Wont work it just stacks with the next list*/
    /*
    float: right;
    */
}

这对我来说很难的是我不想在HTML方面添加任何东西。我只想使用'location'类来让我的图标显示在列表中。

我该怎么做？

Answer 1

由于您已经同时使用:before和after：伪元素，因此您必须使用border-bottom: 1px solid lightgray代替background: lightgray并使用content: '\f124'因为content仅适用于:after或:before：伪元素。

<强> Updated CodePen

＆＃13;

ul.listb {
  padding: 0px;
  margin: 0px;
}
ul.listb li {
  position: relative;
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
  cursor: pointer;
  display: block;
  list-style-type: none;
  padding: 20px 0;
}
ul.listb li:after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  width: 100%;
  border-bottom: 1px solid lightgray;
  box-sizing: border-box;
}
ul.listb li.location:after {
  position: absolute;
  content: '\f124';
  font-family: FontAwesome;
  top: 0;
  display: block;
  height: 100%;
  width: 100%;
  border-bottom: 1px solid lightgray;
  text-align: right;
  line-height: 50px;
}
ul.listb li.online::before {
  margin-left: 4px;
  content: '\f0c8   ';
  /* FontAwesome char code inside the '' */
  font-family: FontAwesome;
  /* FontAwesome or whatever */
  color: green;
}
ul.listb li.offline::before {
  margin-left: 4px;
  content: '\f0c8   ';
  /* FontAwesome char code inside the '' */
  font-family: FontAwesome;
  /* FontAwesome or whatever */
  color: lightgray;
}
ul.listb li:hover {
  background: #F5F5F5;
  /*color: #428BCA;*/
  font-weight: bold;
}

＆＃13;

<link media="all" type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<body>
  <ul class="listb">
    <li class="online location">John Doe</li>
    <li class="online">Doe John</li>
    <li class="offline">Bill Gates</li>
    <li class="online">Steve Jobs</li>
  </ul>
</body>

＆＃13;

Answer 2

除了使用float作为导航图标，您只需在后台进行操作：

background: url("http://www.icone-png.com/png/39/39015.png") no-repeat;
background-size: 20px 20px ; // Any size you want for your image
background-position: right 2px; // you can change the position if you want

您可以自己尝试：http://codepen.io/anon/pen/mywBYJ

最好的问候

在＆＃34; <li>＆＃34;中附加字体图标漂浮在右边</li>

2 个答案: