侧边栏菜单标题在 AdminLte 中未正确显示答案

【问题标题】：Sidebar menu title not showing properly in AdminLte侧边栏菜单标题在 AdminLte 中未正确显示
【发布时间】：2018-04-10 09:47:17
【问题描述】：

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

它显示

文本应该从图标旁边开始

谢谢。

【问题讨论】：

不是理论考试。提供您的代码以供进一步检查。
嗨@amit77309 我添加了请检查，如果您有任何问题，请告诉我
结帐stackoverflow.com/questions/26954916/…
嗨@amit77309 对不起，它不能正常工作，它正在将整个内容移动到新行，并且还在文本末尾移动右侧的箭头
更新了我的答案。

标签： html css adminlte

【解决方案1】：

更新

检查您的浏览器兼容性。对我来说，它在 chrome 中工作。
检查这一小部分，无需使用任何额外的 html 或 css。
检查您的 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>

【讨论】：

嗨@amit77309，你90%是对的。我有解决办法。
关闭这个问题

【解决方案2】：

我在@amit77309 的帮助下得到了解决方案。

需要添加如下样式：

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

谢谢。

【讨论】：