"的字体图标-6ren"> "的字体图标-我一直在尝试仅使用 css 类成员在列表右侧附加一个图标。 http://codepen.io/anon/pen/QwgqVp?editors=110 因此，当我将名为“location”的类附加到所-6ren">
个人中心
gpt4 book ai didi

html - 在右侧 float 一个 "
  • "的字体图标

    • 转载 作者：太空宇宙 更新时间：2023-11-03 21:33:28 25 4
    gpt4 key购买 nike

    我一直在尝试仅使用 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 端添加任何内容。我只想使用“位置”类让我的图标显示在列表中。

    我该怎么做？

    最佳答案

    因为你已经在使用 :before 和 after :伪元素，你将不得不使用 border-bottom: 1px solid lightgray 而不是 background: lightgray 并使用 content: '\f124' 因为 content 只适用于 :after 或 :before :伪元素。

    Updated CodePen 

    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;
    }
    <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>

    关于html - 在右侧 float 一个 "<li>"的字体图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28127572/

    25 4 0
    文章推荐： c# - 子线程结束后如何在主线程中运行一个方法？
    文章推荐： python - Pandas groupby 应用日期时间异常
    文章推荐： python - 如何更改 dask 调度程序和工作人员？
    文章推荐： c# - 为基本线程同步配置 WaitHandle
    太空宇宙
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com