带有图标的列表显示在单行而不是多行答案

【问题标题】：List with icon displayed in a single row instead of multiple rows带有图标的列表显示在单行而不是多行
【发布时间】：2017-12-28 12:29:35
【问题描述】：

我有一个普通列表，其中包含如下图标类

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

【问题讨论】：

我们可以看看你的css吗？
请张贴你的css
@sconner87 css for icons??
请下拉菜单 css :)
删除内联块，你应该很高兴。您可能还需要 list-style-type:none;

标签： html css drop-down-menu html-lists

【解决方案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>

【讨论】：

【解决方案2】：

请使用这个css

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

【讨论】：

它不工作，当我选择显示时工作：继承

【解决方案3】：

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

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

【讨论】：

不要根据假设发布解决方案，等到OP添加CSS样式代码。