如何以响应的方式创建水平元素？

问题描述：

桌面

//lines up items vertically 
---------------------------- 
| -------------- 
| |  item1 | 
| |    | 
| -------------- 
| -------------- 
| |  item2 | 
| |    | 
| -------------- 
| -------------- 
| |  item3 | 
| |    | 
| --------------

在电话

效果，

---------------------------- 
| -------------- ----------------- 
| |  item1 | |  item2  | 
| |    | |     | //line up horizontally for all items 
| -------------- ----------------- 
| 
----------------------------

我使用的角度，这里是我的代码。

<div class="row"> 
    <div class="item-container col-xs-12 col-lg-4"> 
     <ul> 
     <li ng-repeat="item in items"> 
       <div>{{item.name}}</div> 
       //other html to show items infos... 
     </li> 
     </ul> 
    <div> 
</div>

在电话，我只能有一个行项目有限（只能容纳3项），它会4项推到下一行，因为item-container没有足够的宽度。我需要我的所有物品（超过10个）水平显示。有没有办法做到这一点？

非常感谢！

ü要所有项目在屏幕上看到一次，或者当用户扫描剩余显示？只是想让它们水平放置？如果您提供了10个项目，则可以使用％eg- width中的宽度：10％父容器宽度为100％ – Nielarshi 2015-04-05 04:46:06

我想用来查看部分项目，并且可以向右滑动查看其余项目。 – GeekSquard 2015-04-05 05:05:38

转到水平传送带。 http://blog.revolunet.com/angular-carousel/ – Nielarshi 2015-04-05 05:09:44

答

演示 - http://jsfiddle.net/victor_007/zx8re147/如果你想删除在线块之间的空白增加字体大小

： 0 to parent

.container { 
 
} 
 
.block { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: grey; 
 
} 
 
@media screen and (min-width: 320px) and (max-width: 480px) { 
 
    .container { 
 
    white-space: nowrap; 
 
    overflow-x: scroll; 
 
    } 
 
    .block { 
 
    display: inline-block; 
 
    } 
 
}

<div class="container"> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
</div>

使用空格去掉

@media screen and (min-width : 320px) and (max-width : 480px) { 
    .container { 
     white-space: nowrap; 
     overflow-x: scroll; 
     font-size:0; 
    } 
    .block { 
     display:inline-block; 
     font-size:15px; 
    } 
}

演示 - http://jsfiddle.net/victor_007/zx8re147/1/

非常感谢。我还有一个问题。这可以通过引导创建没有媒体查询在CSS？ – GeekSquard 2015-04-05 05:54:52

您需要在媒体查询中添加样式，否则样式将无法应用 – 2015-04-05 06:07:16

答

首先，您需要2个样式1用于桌面，另一个用于手机，因此通过媒体查询将此样式用于您的手机。

在容器里面使用的元素

display: inline-block;

和容器使用

white-space: nowrap;

如何以响应的方式创建水平元素？

相关推荐