我有狀態和城市列表水平顯示，而顯示甚至不是

我想顯示狀態明智的城市水平，但到目前爲止，我無法均勻地顯示它們。隨函附上請查看當前顯示方式的截圖。我有狀態和城市列表水平顯示，而顯示甚至不是

下面是我用於顯示國家和城市的代碼。請幫助我瞭解我錯在哪裏。請找到提供的鏈接下面的屏幕截圖，供大家參考：

<ul>State1 
<li>City1<li> 
<li>City2<li> 
<li>City3<li> 
<li>City4<li> 
<li>City5<li> 
</ul> 
<ul>State2 
<li>City1<li> 
<li>City2<li> 
<li>City3<li> 
<li>City4<li> 
<li>City5<li> 
</ul> 
<ul>State3 
<li>City1<li> 
<li>City2<li> 
<li>City3<li> 
<li>City4<li> 
<li>City5<li> 
</ul> 
etc....! 
CSS: 
ul{ 
width:25%; 
float:left;color:#ABCDEF; 
}

來源

2017-04-07 MGS

你最後一欄看起來不是25％的寬度給我。你能提供網站鏈接或完整的代碼示例嗎？我覺得還有其他的東西在干擾 – StefanBob

我已經在圖片中附加了一部分列表。問題是第一條線是均勻分佈的（請參考阿拉巴馬州，阿拉斯加州，阿爾伯塔省和亞利桑那州）。阿肯色州州應該下降到阿拉巴馬州的底部，因爲每個UL的名單和高度都不相同，所以沒有發生。這是我面臨的問題。也沒有什麼我已經添加到CSS。我提到了我正在使用的相同內容。數據正在從數據庫中顯示。我只是將寬度增加到ul：25％。 – MGS

column-count css m ight是一個逃避這裏

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.newspaper { 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
    -moz-column-count: 3; /* Firefox */ 
    column-count: 3; 
} 
</style> 
</head> 
<body> 

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p> 

<div class="newspaper"> 
<ul> 
<li>ABJHDGD</li> 
<li>ABJHDGD</li> 
<li>ABJHDGD</li> 
<li>ABJHDGD</li> 
<li>ABJHDGD</li> 
<li>ABJHDGD</li> 
</ul> 
<ul> 
<li>BJHDGD</li> 
<li>BJHDGD</li> 
<li>BJHDGD</li> 
<li>BJHDGD</li> 
<li>BJHDGD</li> 
<li>BJHDGD</li> 
<li>BJHDGD</li> 
<li>BJHDGD</li> 
<li>BJHDGD</li> 
</ul> 
<ul> 
<li>JHDGD</li> 
<li>JHDGD</li> 
<li>JHDGD</li> 
<li>JHDGD</li> 
<li>JHDGD</li> 
<li>JHDGD</li> 
</ul> 
</div> 

</body> 
</html>

來源

2017-04-07 15:45:15

這對我來說雖然不完美，但似乎沒有選擇權。只有很少的城市在沒有標題的情況下被列在另一列。但那就好了。謝謝：-） – MGS

我會用，而不是飄Flexbox的。這將使所有的名單，甚至高度，敷正確，但您需要周圍的UL的容器：

HTML

<div class="list-container"> 
    <ul> 
     <li>...</li> 
    </ul> 
</div>

CSS

.list-container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.list-container ul { 
    width: 25%; 
}

退房全codepen例如： http://codepen.io/StefanBobrowski/pen/KWjNoG

來源

2017-04-07 15:43:17 StefanBob

我已經使用你提到的。現在所有的州和城市都在一列顯示。 – MGS

讓我爲你做一個codepen – StefanBob

適用於我，結帳編輯到答案的codepen鏈接 – StefanBob

我有狀態和城市列表水平顯示，而顯示甚至不是

回答

相關問題