使列表项水平，即使在小屏幕中也不会换行

Question

我正在尝试使用无序列表创建图库视图。大屏幕：

使用小屏幕时，它会像这样包裹：

如何隐藏溢出1行的任何内容？

这是HTML：

<div ng-controller="TypeaheadCtrl" class="container-fluid ng-scope" style="
        display: inline;
    ">
    <ul style="list-style-type:none;margin:0;padding:0;display: inline;"><!-- ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;">12 Aug 
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope" style="display: inline-block;">
            <img src="/images/Sunny-icon.png" style="display: block;width:56px;height:56px;">13 Aug
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;">14 Aug 
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;">15 Aug 
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;">16 Aug 
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;float: left;clear: both;">17 Aug 
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;">18 Aug
        </li><!-- end ngRepeat: location in forecasts -->
        <li ng-repeat="location in forecasts" class="ng-binding ng-scope">
            <img src="/images/Sunny-icon.png" style="display:block;width:56px;height:56px;">19 Aug
        </li><!-- end ngRepeat: location in forecasts -->
    </ul>
</div>

Answer 1

对小型桌面使用媒体查询，例如：500px，给出一个固定的高度with overflow：隐藏隐藏，这里是我的代码：JSFiddle

我的css：

    @media screen and (max-width:500px) { /* media query for screen
    with maximum width of 500px */
        div[ng-controller=TypeaheadCtrl] { /* parent div height is
    fixed to 70px so other line is hidden */
            height: 70px; /* image + text */
            overflow: hidden;
        }
    }

    div[ng-controller=TypeaheadCtrl] > ul { /* > is for the first ul child for div,
    if you gonna have an ul in a first ul, this rule don't gonna apply */
        font-size: 0; /* hack for remove spacing for inline-block */
        list-style-type:none;
        margin:0;
        padding:0;
    }

    div[ng-controller=TypeaheadCtrl] li {
        font-size: 12px; /* add font-size again for li */
        display: inline-block;
    }

    div[ng-controller=TypeaheadCtrl] li > img {
        display:block;
        width:56px;
        height:56px;
    }

我也从你的html中删除了所有内联样式，它更容易维护。 希望这是你想要的