html - 边栏菜单标题在 AdminLte 中未正确显示

标签 html css adminlte

在 AdminLTE 主题中,当标题很长时,侧边栏菜单标题无法正确显示,它会中断行并在图标下方显示文本。 我希望它从第一行的第一个字母下方开始 我附上了截图 图片中的“consetetur”应该从“Lorem”一词的正下方开始。

这是我的代码:

<li class="treeview">
<a href="#">
    <i class="fa fa-circle-o"></i>
    <span style="padding-right: 50px;white-space: normal;line-height:14px">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
    </span>
    <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
    </span>
</a>
<ul class="treeview-menu" style="display: none;">
    <li>
        <a href="#">
            <div style="width:100%;display:inline-block">
                <div style="width:10%;float:left;padding-top: 5px;">
                    <i class=" fa fa-arrow-circle-right"></i> 
                </div>
                <div style="width:90%;float:right">
                    Lorem ipsum dolor
                </div>
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <div style="width:100%;display:inline-block">
                <div style="width:10%;float:left;padding-top: 5px;">
                    <i class=" fa fa-arrow-circle-right"></i> 
                </div>
                <div style="width:90%;float:right">
                    Lorem ipsum dolor
                </div>
            </div>
        </a>
    </li>
</ul>

关于使用

a {  display: table} a>* {  display: table-cell;}

显示

enter image description here

文字应该紧挨着图标开始

谢谢。

最佳答案

已更新

  1. 检查您的浏览器兼容性。对我来说,它在 chrome 中工作。
  2. 在不使用任何额外的 html 或 css 的情况下检查这一小部分。
  3. 检查您的 CSS 是否覆盖了此样式。

a {
  display: table
}

a>* {
  display: table-cell;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a href="#">
  <i class="fa fa-car"></i>
  <span >
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod Lorem ipsum dolor sitLorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod Lorem ipsum dolor sitLorem ipsum dolor sit
    </span>
</a>

关于html - 边栏菜单标题在 AdminLte 中未正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49750474/

相关文章:

javascript - 从 HTML5 本地存储中检索值

AdminLTE 内容包装器最小高度问题

php - Adminlte 在运行时的 Laravel 侧边栏更新标签

javascript - 编写脚本并搜索结果(表单)

jquery - 在可拖动的 DIV 中添加图像按钮并在单击时切换图像源

html - UIWebView 底部出现黑线。如何去除?

javascript - 如何正确导出和处理可编辑表格中的数据

javascript - Ionic 应用程序在 Chrome 和设备上滞后很多

css - (Bootstrap 3 + AdminLte2) - 导航选项卡和右键

javascript - 更改谷歌地图数据层点的 z-index