HTML/CSS如何糾正兩個列表元素的重疊？

我一直在嘗試幾個小時來解決我的代碼中的問題。
HTML/CSS如何糾正兩個列表元素的重疊？

如果瀏覽器的窗口大小發生變化，黑色邊框與灰色邊框不匹配，但它應該。如果整個灰色邊框現在可見，則應該跳到下一行。

任何想法如何解決這個問題？

.ul_images { 
 
\t text-align: center; 
 
\t width: 100%; 
 
\t padding-left: 0; 
 
} 
 

 
.li_image{ 
 
\t display: inline-block; 
 
} 
 

 
.a_image { 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
\t background-repeat: no-repeat; 
 
\t height: 250px; 
 
\t width: 250px; 
 
\t border: 4px solid #000; 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t position: relative; 
 
\t text-align: left; 
 
\t margin: 10px 10px; 
 
} 
 

 
.a_image_span { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t text-align: center; 
 
\t word-wrap: break-word; 
 
\t margin-top: 20px; 
 
\t color: #E6E6E6; 
 
} 
 

 
.li_image_background { 
 
\t opacity: .3; 
 
\t filter: Alpha(opacity=30); 
 
\t position: absolute; 
 
}

<!DOCTYPE HTML> 
 

 
<head> 
 
\t <link rel="stylesheet" href="mystyle.css" type="text/css" /> 
 
</head> 
 

 
<body> 
 
\t <ul class="ul_images"> 
 
\t \t <li class="li_image li_image_background"><a class="a_image" style="background-image: url('background.jpg');" href="#"></a></li> 
 
\t \t <li class="li_image"><a class="a_image a_image_backgroundsize" style="background-image: url('overlay.png');" href="#"><span class="a_image_span">text here</span></a></li> 
 
\t \t 
 
\t \t <li class="li_image li_image_background"><a class="a_image" style="background-image: url('background.jpg');" href="#"></a></li> 
 
\t \t <li class="li_image"><a class="a_image a_image_backgroundsize" style="background-image: url('overlay.png');" href="#"><span class="a_image_span">text here</span></a></li> 
 
\t \t 
 
\t \t <li class="li_image li_image_background"><a class="a_image" style="background-image: url('background.jpg');" href="#"></a></li> 
 
\t \t <li class="li_image"><a class="a_image a_image_backgroundsize" style="background-image: url('overlay.png');" href="#"><span class="a_image_span">text here</span></a></li> 
 
\t \t 
 
\t \t <li class="li_image li_image_background"><a class="a_image" style="background-image: url('background.jpg');" href="#"></a></li> 
 
\t \t <li class="li_image"><a class="a_image a_image_backgroundsize" style="background-image: url('overlay.png');" href="#"><span class="a_image_span">text here</span></a></li> 
 
\t </ul> 
 
</body>

來源

2015-01-12 Dave

按照您的要求，我已經把第一個灰色箱子在黑盒子。請找同樣的小提琴鏈接 <ul class="ul_images"> /* Your Code */ ..</ul>JSFIDDLE

來源

2015-01-12 13:23:18

感謝您的評論。我想重疊黑色邊框和灰色邊框，沒有位置絕對那些邊框不會重疊。 – Dave

感謝您的回覆......我已根據您的要求編輯了我的答案。我已將第一個灰色邊框與黑色邊框一起放置。請查找相同的鏈接。 –

HTML/CSS如何糾正兩個列表元素的重疊？

回答

相關問題