无论内容如何，​​强制元素在同一行

Question

我已在这里搜索并尝试了一些已接受的解决方案，但不适合我的情况。我已经列出了一些html，我需要这些元素包装元素和内部元素在单行中。 这里看起来如何和html;

HTML;

<div class="container-fluid">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="well">
                            <ul class="media-list">
                                <li class="media">
                                    <a class="toggle-area pull-left" href="javascript:void(0);">
                                        <img class="media-object" alt="Mali Sistemler" src="/Content/img/login/mali_hizmetler.png">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="toggle-area media-heading"><span style="width: 95%;">Mali Sistemler</span><i class="fa fa-parent-container fa-plus-square pull-right"></i></h4>
                                        <div class="container-menus" style="display:none;"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="well">... </div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="well">
                            <ul class="media-list">
                                <li class="media">
                                    <a class="toggle-area pull-left" href="javascript:void(0);">
                                        <img class="media-object" alt="Denetim Sistemleri" src="/Content/img/login/denetim.png">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="toggle-area media-heading"><span style="width: 95%;">Denetim Sistemleri</span><i class="fa fa-parent-container fa-plus-square pull-right"></i></h4>
                                        <div class="container-menus" style="display:none;"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="well">... </div>
</div>
</div>

Answer 1

white-space的序列将合并为一个white-space。文本永远不会换行到下一行。文本继续在同一行，直到遇到<br>标记

使用white-space:nowrap

更新css

.media-body, .media-left, .media-right {
    display: table-cell;
    vertical-align: top;
    white-space: nowrap; /* Add this */
}

工作小提琴

<强> fiddle code