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

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

正如我在评论中提到的，您需要进行以下更改：

• 删除display:inline-block（删除内联样式属性，使li保留其默认行对齐行为）
• 添加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;
}

<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>

Answer 2

请使用此CSS

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

Answer 3

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

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