如何以響應的方式創建水平元素？

桌面

//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個）水平顯示。有沒有辦法做到這一點？

非常感謝！

來源

2015-04-05 GeekSquard

ü要所有項目在屏幕上看到一次，或者當用戶掃描剩餘顯示？只是想讓它們水平放置？如果您提供了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/

來源

2015-04-05 05:08:50

非常感謝。我還有一個問題。這可以通過引導創建沒有媒體查詢在CSS？ – GeekSquard 2015-04-05 05:54:52

您需要在媒體查詢中添加樣式，否則樣式將無法應用 – 2015-04-05 06:07:16

首先，您需要2個樣式1用於桌面，另一個用於手機，因此通過媒體查詢將此樣式用於您的手機。

在容器裏面使用的元素

display: inline-block;

和容器使用

white-space: nowrap;

來源

2015-04-05 04:59:08

如何以響應的方式創建水平元素？

回答

相關問題