無序列表項添加圖像下方的空間

不知道標題是否是真正的問題，但我的水平滾動圖像列表播放不好。我希望所有的圖像能夠相互疊加（有效地浮動）（到目前爲止，我已經設法使用display:inline）。但是我希望他們都是100％的窗戶/身體的高度，而且不是很好。無序列表項添加圖像下方的空間

這裏是我的HTML：

<body> 
    <div id="content"> 
    <ul id="content-images"> 
     <li> 
      <img src="image1.jpg"/> 
     </li> 
      <li> 
      <img src="image2.jpg"/> 
     </li> 
      <li> 
      <img src="image3.jpg"/> 
     </li> 
     </ul> 
    </div> 
</body>

而CSS：

html, body{ 

    margin:0px; 
    border:0px; 
    padding:0px; 

    height:100%; 

} 

#content{ 

    height:100%; 
    background-color:green; 

} 

#content-images{ 

    height:100%; 

    white-space: nowrap; 

} 

#content-images li{ 

    font-size:0; 
    display:inline; 

    height:100%; 

} 

#content-images img{ 

    max-height:100%; 
    height:auto; 
    max-width:100%; 
    width:auto; 

}

的問題是大約2/3px的小的差距沿李物品的底部運行。很難判斷它是body還是list items的一部分，但無論是哪種方式都是令人討厭的反常現象。

我在Chrome中查看。我附上了截圖。注意底部的白線。爲了清楚起見，我很高興圖像在X軸上離開頁面，客戶端在圖像中水平滾動，但我不希望圖像和圖像之間的垂直間隙窗戶的邊緣。

Screenshot

更新：

我無法複製在的jsfiddle的問題，因爲小提琴似乎有困難的造型html，body和相對大小的圖像。我沒有時間或者找出原因。

我決定去黑客。 vertical-align:bottom在img和overflow-y:hidden在html和主體的混合物。這會在列表項目冗餘後留下任何空格，因爲可見區域將受到限制。

來源

2013-08-25 shennan

您可以爲您的問題[小提琴]（http://jsfiddle.net/）？ – Sourabh

我把你的觀點@Sourabh，但不幸的是，一個jsFiddle似乎並不想顯示全尺寸的圖像。這是一個jsFiddle問題嗎？ – shennan

你可以阻止這種圖像標籤使用vertical-align: bottom，就像這樣：

img { 
    vertical-align: bottom; 
}

希望這有助於。

來源

2013-08-25 14:34:13 Jrn

正如我對我的問題下面的評論者所說的，這並不能解決問題。它可能會刮掉一個像素，但無序列表下方仍有一條白線。 – shennan

他已經刪除了他的評論，這是一個恥辱。 – shennan

我不知道評論被刪除。你能給我們一個說明你的問題的jsfiddle，以便我們可以有一個更好的外觀？ – Jrn

你有沒有嘗試從無序列表元素中刪除邊距？

#content-images{ 
    height:100%; 
    white-space: nowrap; 
    margin: 0; 
}

來源

2013-08-25 14:40:56 Derick

我已經爲我能想到的每個元素應用了0邊距，填充和邊框。 – shennan

嘗試將li項目顯示屬性更改爲內嵌塊。通過檢查Chrome開發工具中的元素，您應該能夠非常快速地分辨出創建以下空間的元素。 – Derick

使用浮動而不是左側在線：

#content-images li{ 

float:left; 

}

這個空間是因爲內聯元素有後他們一個空間。爲圖片添加頁邊距：-4px。也給圖像display:block。玩所有這一切，你應該能夠解決你的問題。

來源

2013-08-25 14:41:21 Alqin

由於display: inline[Reason here]您正在收到問題。阿爾欽是對的，float:left將解決問題，但你也必須刪除display:inline。如果您想要水平滑塊，則可以將寬度ul增加爲圖像寬度的總和，並在其父代div上使用overflow-x:hidden或overflow-x:auto。

PS：在所有元素上使用height:100%並不是一個好主意。當內容溢出時，它會讓你的頁面看起來很奇怪。

我改變了對CSS以下，並且也去掉，我認爲是沒有必要的性質：

html, body{ 
    margin:0px; 
    height:100%; 
} 

#content{ 
    height:100%; /* a bad idea */ 
    background-color:green; /* add this to body if you want whole body green */ 
    overflow-x: auto; 
} 

#content-images{ 
    height:100%; /* again, a bad idea*/ 
    width: 3000px; /* sum of widths of images I used to test */ 
} 

#content-images li{ 
    font-size:0; 
    float: left; 
} 

#content-images img{ 
    max-height:100%; 
    height:auto; 
    max-width:100%; 
    width:auto; 
}

來源

2013-08-25 19:55:33 Sourabh

這種方法的問題是需要使用編程語言來確定無序列表的大小。我很欣賞你投入它的時間，但我需要首先計算JavaScript中的寬度或PHP中的服務器寬度的總和。這就是爲什麼我選擇'inline'而不是'float'。 – shennan

無序列表項添加圖像下方的空間

回答

相關問題