刪除列表右側的空缺

我正在嘗試製作一個類似於手機主頁的網頁。我希望它根據屏幕的大小對圖標重新排序。我有什麼到目前爲止波紋管刪除列表右側的空缺

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
li { 
 
    display: inline-block; 
 
    width: 5em; 
 
    height: 5em; 
 
    padding: 1em; 
 
    margin: 1em; 
 
    background-color: rgba(20, 20, 20, 0.7); 
 
    border-radius: 1em; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<ul> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
</ul>

這段代碼的問題是，當你調整窗口的大小和列表項移動到下一行，你可以留下一個大在右側的差距。有沒有一種方法可以將整個列表或整個列表項目之間進行對齊來分配這些額外的空間？我想避免將圖標居中，這樣我就可以保持它們全部水平和垂直對齊。

來源

2016-07-05 Ryan Horrigan

我改變從inline-block到float:left，我將你的padding到img

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    animation: FadeIn 1.3s; 
 
    width: 100%; 
 
} 
 
li { 
 
    float: left; 
 
    background-color: rgba(20, 20, 20, 0.7); 
 
    border-radius: 1em; 
 
    width: 13.42%; 
 
} 
 
ul li:not(:first-child){ 
 
    margin-left: 1%; 
 
} 
 
img { 
 
    width: 82%; 
 
    padding: 8%; 
 
}

<ul> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
</ul>

來源

2016-07-05 02:18:21 mmativ

是的，這是接近。但是這導致項目被對齊到中心。這些我想保持左對齊，以便它形成一個網格。 –

然後你需要爲你的'li'設置寬度，然後使用'@ media' – mmativ

這是更新的，我使用'float'而不是'inline-block'。 – mmativ

我只是複製你的代碼，增加了媒體的質疑。我希望這會有所幫助。

CSS補充：

@media only screen and (max-width: 768px) { 
    ul { 
    padding: 10%; 
    } 
}

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    animation: FadeIn 1.3s; 
 
} 
 
li { 
 
    display: inline-block; 
 
    width: 5em; 
 
    height: 5em; 
 
    padding: 1em; 
 
    margin: 1em; 
 
    background-color: rgba(20, 20, 20, 0.7); 
 
    border-radius: 1em; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
@media only screen and (max-width: 768px) { 
 
    ul { 
 
    padding: 10%; 
 
    margin-top: 0; 
 
    } 
 
}

<ul> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.google.com"> 
 
     <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    </a> 
 
    </li> 
 
</ul>

來源

2016-07-05 02:27:54 claudios

刪除列表右側的空缺

回答

相關問題