带有对齐字体很棒图标的多行列表项

2024-03-11

我正在制作一个项目清单<li>twitter bootstrap 中每个列表项的标签和不同的 FontAwesome 图标。我试图使列表测试中心垂直,但不能这样

<ul class="middle">
<li>
 <a href="#">
  <i class="icon-cog icon-2x"></i>
   very long multiline item one</a>
</li>
<li>
 <a href="#">
  <i class="icon-pencil icon-2x"></i>
    very long multiline item two
 </a>
</li>
</ul>

产生了

这就是我想要实现的目标

我怎样才能做到这一点?


这是你正在看的吗
http://jsbin.com/iFaWoYa/1/ http://jsbin.com/iFaWoYa/1/

ul{list-style:none; width:100px;}
ul li {position:relative; margin:0 0 20px 0}
ul li a{position:relative; display:inline-block; padding-left:35px;}
ul li i{position:absolute; padding-right:25px; top:30%;}


<ul class="middle">
  <li>
    <i class="icon-cog icon-2x"></i> <a href="#">very long multiline item one</a>
  </li>
  <li>
    <i class="icon-pencil icon-2x"></i> <a href="#">very long multiline item two</a>
  </li>
</ul>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带有对齐字体很棒图标的多行列表项 的相关文章

  • 如何在css3中制作曲线风格的菜单?

    是否可以用css3制作曲线 圆弧样式的菜单 我可以使用canvas或HTML5中的其他东西来实现这一点吗 预先感谢 洛根 不幸的是 我不知道有什么优雅的解决方案 特别是当涉及到菜单项时 但弧线本身应该可以在纯 css 和几个 html 元素
  • 加载背景图像的图像不显示

    我真的很困惑 我正在尝试创建一个带有图标和一些按钮的登陆页面 但我无法设法使我正在使用的背景图像显示出来 即使它是根据 Chrome 的开发工具包加载的 我只有这些行 索引 html div class row div class tryh
  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di
  • 中心引导表宽度为 100%?

    table class table table striped table hover table responsive table
  • CSS 中的边框图像开头

    MDN 是这样定义的边框图像开始 https developer mozilla org en docs Web CSS border image outset border image outset 属性描述了边框的数量 图像区域超出边框
  • SELECT 元素中的图像[重复]

    这个问题在这里已经有答案了 我知道如何使用 CSS 背景图像属性让图片显示在 HTML 下拉表单元素中的选项旁边 但是 图像不会显示在所选元素上 有什么方法可以做到这一点 最好只使用CSS EDIT 这是列表元素的工作代码的示例 但是 当下
  • 属性中的角度表达式

    我有一个使用 Angular 的页面 其中我从引导程序实现了弹出窗口 img class state msg 数据内容无法正确呈现 它按字面意思返回 item status message 而不是 message 的值 角度在 数据 属性中
  • jquery 文本旋转

    我在 div 中有一个简单的文本 如下所示 div div This is an example text div div 我希望 div 内的文本旋转 20 30 度 我已经找到了this https stackoverflow com
  • 使用过渡+不透明度更改+溢出隐藏时出现问题

    如果您看到我共享的代码示例 您可以看到覆盖层超出了框的范围 我将问题追溯到transition属性 我想删除div之外的内容 溢出没有按预期工作 删除transition有效 但如果可能的话我想保留它 任何帮助表示赞赏 代码笔链接 http
  • 如何使弹出窗口出现在我的鼠标进入悬停目标的位置?

    这是一个示例代码 用于显示我的按钮下方的弹出窗口 fn popover defaults extend fn tooltip defaults placement bottom content 现在我希望弹出窗口出现在光标移动的位置 不仅是
  • Chrome 中的错误或 CSS 错误? (隐藏可见性的锚点)

    在任何 HTML 中测试这个简单的行 a href anything span insible text here span a 您可以直接从这里测试 http jsfiddle net wqS3E http jsfiddle net wq
  • 从 PHP 生成渐变颜色

    我想知道如何构建一个给出颜色代码和 显示该颜色的渐变 例如 function generate color int colorindex Generate 10 pale colors of this color 请帮我 迈克尔引用的代码相
  • Twitter Bootstrap 轮播在加载时自动播放

    使用twitter bootstrap框架 如何调用轮播来 自动滑动 这意味着当页面加载时 轮播会自动滚动 我尝试过 javascript onLoad click 函数 a 下一个链接的 但这不起作用 你应该这样做Twitter Boot
  • 更改 Bootstrap 工具提示显示/淡入和淡出的时间量

    我正在使用 Twitter Bootstrap 添加工具提示 是否可以添加一个属性来确定工具提示显示的时间 淡入和淡出所需的时间 span class myClass span Cheers Bootstrap 使用该类 fade用于工具提
  • 底部页脚的 css 布局,动态 ajax 内容更改页面高度

    Update 实际上 我现在通过放弃固定页脚设计来解决这个问题 动态内容移动页脚并适当调整容器大小似乎没有问题 除非页脚最初固定在浏览器底部 我希望其他人最终能够提供一个兼具两全其美的出色解决方案 I spent all day tryin
  • CSS:如何在模糊的背景上剪切文本?

    我想重新创建以下样式 我想出了以下内容 问题是剪切不会影响模糊滤镜 我不知道如何解决它 这是我的 HTML 代码 glass width 40 height 100 position absolute background rgba 255
  • CSS :hover 影响所有子 div

    我里面有一个父 div 和多个子 div 我希望这样 如果您将鼠标悬停在父 div 上 它会以不同的方式影响所有子 div 的悬停状态 即 一个 div 的文本带有下划线 另一个 div 的文本会更改颜色 并且保存图像的 div 使图像稍微

  • 有多少像素? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 一个有多少像素 br 标签添加 我知道 br 高度可以通过CSS控制line height财产 不同浏览器的值是否相同 它会添加与浏览
  • CSS calc() 是否可以得到负值?

    假设我们有一个位于视口中心的容器 centered margin 0 auto width 960px 在该容器内 我有另一个容器 其宽度需要为视口宽度的 100 我可以将边距设置为 widest margin 0 480px 例如 问题是
  • 使用 div 或表格来包含链接列更好吗?

    我的页面底部有 3 列链接 每列都放入一个 div 中 所有三个 div 都包装在页面中央的一个大 div 中 这是更适合桌子的东西还是桌子不适合这项工作 您还可以使用 ul http www w3schools com tags tag

随机推荐

  • 本地删除文件后SVN提交错误

    我有一个使用 Netbeans 6 1 构建的项目 并且使用 SVN 我删除了本地计算机上的一些文件 然后尝试将更改提交到 SVN 存储库 提交失败并显示错误消息 C path to project myfile 的条目没有 URL 其中
  • 自定义clickonce下载屏幕

    众所周知 当我们双击 clickonce 安装的应用程序时 会弹出一个 clickonce 屏幕 显示 正在验证系统要求 然后 如果服务器中有更新的版本 则单击更新本地安装的版本 并启动应用程序 有什么方法可以定制整个过程 这并不意味着我想
  • Backbone.js:未到达路由器回调

    我在获取简单的应用程序示例进行路由时遇到问题 我正在使用backbone on rails gem 这是我的 App js coffee window App Models Collections Views Routers documen
  • 使用 Autodesk API 下载文档

    我正在尝试从 BIM 360 Docs 下载文档 如果我想下载类型为 type items autodesk bim360 File 我只需要获取bucketID和objectID projects
  • 如何更改特定类名的所有类名元素

    如何更改特定类名的所有类名元素 我的意思是 假设我有 3 个带有 MyClass 类的 div 我想在 JavaScript 中将它们的类名更改为 notMyClass 该怎么做 div class MyClass div div clas
  • Java 8 是否提供了访问者模式的替代方案?

    This https stackoverflow com questions 2078978 functional programming vs object oriented programming 2079678 2079678Stac
  • 如何在Android中暂停/睡眠线程或进程?

    我想在两行代码之间暂停一下 让我解释一下 gt 用户单击一个按钮 实际上是一张卡片 我通过更改该按钮的背景来显示它 thisbutton setBackgroundResource R drawable icon gt 假设 1 秒后 我需
  • 在 mobilesafari web 应用程序中嵌入 html5

    我无法找到资源来解释这是否可能 Apple 文档可以在这里找到 https developer apple com library content documentation AudioVideo Conceptual Using HTML
  • Facebook 登录总是返回为已取消。 (iOS 斯威夫特)

    我目前正在尝试使用 4 0 版本的 SDK 实现 Facebook 登录 3 版本也会发生这种情况 当我打电话时登录并读取权限 4 0版本 或openActiveSessionWithReadPermissions 3 版本 立即调用闭包
  • 如何将在特定日期创建的所有文件从 GCS 中的一个存储桶复制到另一个存储桶?

    我们如何将指定日期创建的所有文件从 GCS 中的一个目录复制到另一个目录 我有一个存档文件夹 需要将在指定日期 例如 2022 年 8 月 20 日 创建的所有文件复制到另一个目录 我们可以通过提供文件中的文件名列表并将其作为输入提供来做到
  • Go 模板:如何访问模板中的数组项 (arr[2])?

    如何访问模板中的数组项 例如 a 2 每当我这样做时 我都会得到 坏字符 U 005B a 2 您需要使用index模板功能 index a 2
  • map.begin() 的迭代器类型是什么

    template
  • 如何更改 R 的语言环境?

    我在 Ubuntu 12 10 上使用 R 版本 2 15 3 2013 03 01 系统是德语 R 也是如此 这在搜索错误消息时很不方便 以这种方式在 xterm 中执行 R LANG C R部分解决了问题 然后 R 以英文显示所有内容
  • 如何使用Javascript模拟按键? [复制]

    这个问题在这里已经有答案了 是否可以使用 JavaScript 来模拟按键 例如 如何模拟 Ctrl Alt ArrowKey 我想模拟特殊按键 有可用的API 框架吗 可以说 我正在构建一个基于网络的虚拟键盘 如果您的目标是实现 send
  • PHP 5.3 DateTime 用于重复事件

    我有一个日历应用程序 它使用较新的 PHP DateTime 类 我有一种处理重复事件的方法 但它看起来很黑客 我想看看你们是否有更好的想法 我有一个从 2009 年 11 月 16 日 2009 年 11 月 16 日 开始的重复事件 每
  • jQuery Ajax 复选框状态

    我的页面上有复选框 我想通过 ajax 将其状态发送回数据库 我知道如何将 jquery 与 ajax 结合使用 但我不知道如何获取已选中和未选中的状态以及复选框的 id 以便我可以将其发送回服务器 有任何想法吗 if yourCheckb
  • EF4 Code-First 中 OnModelCreating 的目的是什么?

    我很好奇 EF4 Code First 上下文类中 OnModelCreating 的目的是什么 它是如何工作的 这是一个不错的article http blogs msdn com b adonet archive 2010 12 06
  • 使用 Z-Index 的层问题

    我有 2 个控件 一个在另一个之上 滑块上的边框 在边框上 用户可以标记一个片段以在滑块上以不同的颜色显示 因为在xaml中边框是写在slider后面的 所以它出现在slider的顶部 没关系 我的问题是 滑块的拇指也出现在边框下方 如何设
  • 在 python 中使用 Sin-1 或反 sin

    这是我的代码 point of intersection between opposite and hypotenuse x y pygame mouse get pos using formula for length of line l
  • 带有对齐字体很棒图标的多行列表项

    我正在制作一个项目清单 li twitter bootstrap 中每个列表项的标签和不同的 FontAwesome 图标 我试图使列表测试中心垂直 但不能这样 ul class middle li a href i class icon