您好,我正在尝试创建一个效果来存档效果,如下所示
桌面
//lines up items vertically
----------------------------
| --------------
| | item1 |
| | |
| --------------
| --------------
| | item2 |
| | |
| --------------
| --------------
| | item3 |
| | |
| --------------
在电话中,
----------------------------
| -------------- -----------------
| | item1 | | item2 |
| | | | | //line up horizontally for all items
| -------------- -----------------
|
----------------------------
我正在使用 Angular,这是我的代码。
<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 个)。有没有办法做到这一点?
非常感谢!
最佳答案
演示 - http://jsfiddle.net/victor_007/zx8re147/
如果你想删除行内 block 之间的空白,添加 font-size:0 到 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;
}
}
关于javascript - 如何以响应方式创建水平元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29454164/