如何設置旁邊的圖像列表

我有一個圖像列表，但我希望所有的圖像彼此相鄰。而不是水平滾動。如何設置旁邊的圖像列表

我試圖設置滾動菜單的最大高度，但他隱藏下面的2張圖片。我也禁用了垂直滾動，但這不起作用。

如果可能我只想用css。如果我需要JavaScript來解決它，我使用JQuery。

What I have now

我的HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 
    <link href="css/index.css" rel="stylesheet"/> 
    <link href="css/global.css" rel="stylesheet"/> 
    <meta charset="UTF-8"> 
</head> 
<body> 
    <div id="list"> 
     <img src="img/1.jpg" class="img"> 
     <img src="img/2.jpg" class="img"> 
     <img src="img/3.jpg" class="img"> 
     <img src="img/4.jpg" class="img"> 
     <img src="img/5.jpg" class="img"> 
     <img src="img/6.jpg" class="img"> 
     <img src="img/7.jpg" class="img"> 
     <img src="img/8.jpg" class="img"> 
    </div> 
    <div id="output"> 

    </div> 
    <script src="js/jquery.js"></script> 
    <script src="js/image.js"></script> 

</body> 
</html>

我的CSS：

body{ 
padding:0px; 
margin:0px; 
overflow-y:hidden; 
} 
.img{ 
height:100px; 
width:200px; 
display:inline-block; 
margin-left:0px; 
} 

.loaded{ 
width:100%; 
} 
#list{ 
overflow-y:hidden; 
width:auto; 
}

來源

2014-11-02 Vinc199789

只需添加

white-space: nowrap;

到#list

由於您的.img圖像正確設置爲inline-block您現在可以控制父元素與https://developer.mozilla.org/en-US/docs/Web/CSS/white-space空白（適用於內直列，inline-block的孩子。）

NOWRAP
正常情況下會摺疊空白，但會抑制文本中的換行符（文本換行）。

來源

2014-11-02 13:08:04

感謝的作品。 – Vinc199789 2014-11-02 13:09:43

不要忘記交叉瀏覽器內聯塊解決方案顯示：-moz-inline-stack; \t display：inline-block; \t vertical-align：top; \t zoom：1; \t * display：inline; – d1m5n 2014-11-03 09:42:46

由於@ roko-c-buljan說簡單地將white-space: nowrap;添加到#list。這可以抑制文本中的換行符，這些圖像是display: inline-block。

body{ 
 
padding:0px; 
 
margin:0px; 
 
overflow-y:hidden; 
 
} 
 
.img{ 
 
height:100px; 
 
width:200px; 
 
display:inline-block; 
 
margin-left:0px; 
 
} 
 

 
.loaded{ 
 
width:100%; 
 
} 
 
#list{ 
 
overflow-y:hidden; 
 
width:auto; 
 
white-space:nowrap; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>test</title> 
 
    <link href="css/index.css" rel="stylesheet"/> 
 
    <link href="css/global.css" rel="stylesheet"/> 
 
    <meta charset="UTF-8"> 
 
</head> 
 
<body> 
 
    <div id="list"> 
 
     <img src="img/1.jpg" class="img"> 
 
     <img src="img/2.jpg" class="img"> 
 
     <img src="img/3.jpg" class="img"> 
 
     <img src="img/4.jpg" class="img"> 
 
     <img src="img/5.jpg" class="img"> 
 
     <img src="img/6.jpg" class="img"> 
 
     <img src="img/7.jpg" class="img"> 
 
     <img src="img/8.jpg" class="img"> 
 
    </div> 
 
    <div id="output"> 
 

 
    </div> 
 
    <script src="js/jquery.js"></script> 
 
    <script src="js/image.js"></script> 
 

 
</body> 
 
</html>

來源

2014-11-02 13:09:20 ckuijjer

-2

如果你熟悉的花車，您可以添加

#list img { 
    float:left; 
}

來源

2014-11-02 13:10:17 waplet

不起作用 – Vinc199789 2014-11-02 13:11:39

是的，它的工作原理 - http://jsfiddle.net/ab4w0k0v/，小姐明白問題，對不起 – waplet 2014-11-02 13:27:37

@waplet不，它*沒有工作 – 2014-11-02 13:37:19

您正在尋找這樣的事情？

http://codepen.io/kozumii/pen/IoAFb

#list{ 
    overflow-x:scroll; 
    white-space:nowrap; 
}

來源

2014-11-02 13:19:18 Hitomi

如何設置旁邊的圖像列表

回答

相關問題