표시가 수평이 아니고 가로 및 세로 표시 목록이 있습니다.

상태 현명한 도시를 가로 방향으로 표시하려고했지만 지금까지는 고르게 표시 할 수 없었습니다. 동봉 된 현재 디스플레이 방식의 스크린 샷을 찾아보십시오.표시가 수평이 아니고 가로 및 세로 표시 목록이 있습니다.

아래는 미국 및 캐나다의 표시에 사용하는 코드입니다. 내가 어디로 잘못 가고 있는지 이해하는 것을 도와주세요. 참조 용 스크린 샷을 위해 아래 링크를 제공 찾아주세요 :

이

<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

이미지에 목록의 일부를 첨부하고있었습니다. 문제는 첫 번째 라인이 균등하게 분배되고 있다는 것입니다 (Alabama, Alaska, Alberta & Arizona 참조). 알칸사 주 (State Arkansas)는 목록 및 높이가 각 UL마다 다르므로 알라바마 주 (state alabama)의 맨 아래에 내려야합니다. 이것이 제가 직면하는 문제입니다. 또한 내가 CSS에 추가 한 것은 아무것도 없다. 나는 내가 사용하고있는 것을 언급했다. 데이터가 데이터베이스에서 표시되고 있습니다. 방금 너비가 25 % 인 ul에 부동을 추가했습니다. – MGS

column-count css m 여기가 탈출구가 될 것입니다

<!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

이것은 완벽하지는 않지만 나를 위해 일한다. 그러나 옵션은 없다. 도시의 단지 몇몇은 표제없이 다른 란에 열거되고있다. 그러나 그 다음 oks. 감사 :-) – 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

내가 언급 한 내용을 사용했습니다. 이제 모든 주와 도시가 1 개의 단일 열에 표시됩니다. – MGS

내가 당신을위한 코펜 핀을 만들어 보자. – StefanBob

나를 위해 일한다. 코데 핀 링크를 내가 대답 – StefanBob

표시가 수평이 아니고 가로 및 세로 표시 목록이 있습니다.

답변

관련 문제