边栏菜单标题在AdminLte中无法正确显示

时间:2018-04-10 09:47:18

标签: 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

文字应该从图标旁边开始

感谢。

2 个答案:

答案 0 :(得分:0)

<强>更新

  1. 检查您的浏览器兼容性。对我而言,它正在使用chrome。
  2. 检查这一小部分而不使用任何额外的html或css。
  3. 检查你的css是否覆盖了这种风格。
  4. &#13;
    &#13;
    a {
      display: table
    }
    
    a>* {
      display: table-cell;
    }
    &#13;
    <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>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:0)

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

需要添加以下样式:

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

感谢。