带有图标的列表显示在一行而不是多行中

Question

我有一个包含图标类的正常列表，如下所示

<div class="dropdown search">
<div class="dropdown-toggle" type="button" data-toggle="dropdown">Search
<span class="caret"></span></div>
<ul class="dropdown-menu">
<li class="icon-mobile" ng-click="changeAssetDetails('SmartPhone')"></li>
<li class="icon-tablet" ng-click="changeAssetDetails('Tablets')"></li>
<li class="icon-cogs" ng-click="changeAssetDetails('Solution')"></li>
<li class="icon-file-spreadsheet2 text-orange-800 " ng-click="changeAssetDetails('SimCard')"></li>

         

我希望每个列表项都应该作为正常行为出现在一行中。但是我将所有项目都放在一行中。我已经为上面的相同内容上传了一张图片

有人可以帮我解决这个问题吗？

我的预期结果将是每一行都会显示每个图标。

注意：下面是浏览器检查元素窗口中的css

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    min-width: 1em;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    vertical-align: middle;
    position: relative;
    top: -1px;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Answer 1

如我的评论中所述，您需要进行以下更改：

• 删除list-style-type:none（删除内联样式属性，使li保留其默认行对齐行为）
• 添加[class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; min-width: 1em; list-style-type:none; text-align: center; font-size: 16px; vertical-align: middle; position: relative; top: -1px; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }（隐藏li的默认项目符号）

＆＃13;

＆＃13;

<div class="dropdown search">
<div class="dropdown-toggle" type="button" data-toggle="dropdown">Search
<span class="caret"></span></div>
<ul class="dropdown-menu">
<li class="icon-mobile" ng-click="changeAssetDetails('SmartPhone')">D</li>
<li class="icon-tablet" ng-click="changeAssetDetails('Tablets')">A</li>
<li class="icon-cogs" ng-click="changeAssetDetails('Solution')">B</li>
<li class="icon-file-spreadsheet2 text-orange-800 " ng-click="changeAssetDetails('SimCard')">C</li>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

请使用此css

        .dropdown-menu li {
           display:inline-block;
         }

Answer 3

很难说没有可能检查元素完整的CSS文件，但它应该有所帮助：

ul.dropdown-menu li {
    display: block;
}