하나의 라인에서 각 LI LI가 정당화되도록하는 자동 열

나는 많은 목록 요소로 정렬되지 않은 목록을 가지고 있습니다. 정확한 숫자는 li입니다. ul - 예 : 3 또는 4 개의 요소 (모두 매우 간결한 요소) - displayli은 block (실제 목록이 아님) columns 기능을 사용하여 한 줄에 모든 것을 설정하고 동일하게 가운데 맞춤/맞춤을 설정하려고합니다.하나의 라인에서 각 LI LI가 정당화되도록하는 자동 열

그러나 내가 columns: 4을 입력하고 3 개의 요소 만있는 경우 네 번째 요소가 누락 된 것처럼 표시됩니다. columns: 3이 지정되어있는 것처럼 표시 할 수있는 방법이 있습니까? (나는 auto에 열을 설정하려고했지만, 내가 테스트 한 브라우저에서 아무것도 할 것 같지 않았다.)

는 기본적으로,이 ul의 columns CSS 속성이 li 자녀의 수를 설정하려는 ul에 CSS가 있습니다.

출처

2017-09-11 cnst

당신은 당신이 지금까지 무슨 짓을 보일 수 있는가? –

@ShadowFiend, [여기] (http://reg.su/?SO/46148121); 조건에 따라 네 번째 요소를 추가하고 싶지만 3 또는 4 개의 요소와 똑같이 작동하는 정적 CSS가 있어야합니다. – cnst

코드를 의미합니까? –

li 요소의 표시 속성을 변경하여이 (3 또는 4 개) 가운데를 창 가운데에 정렬 할 수 있습니다.

ul#registrar { 
 
    text-align: center; 
 
} 
 
ul#registrar li { 
 
    display: inline-block; 
 
}

<ul id="registrar"> 
 
<li><a href="/reg.com">reg.com</a></li> 
 
<li><a href="/reg.ru">reg.ru</a></li> 
 
<li><a href="/nic.ru">nic.ru</a></li><li><a href="/nic.ru">nic.ru</a></li> 
 
</ul>

출처

2017-09-11 04:59:14 Anuresh

나는 본다; 'inline-block'처럼 보이고, https://stackoverflow.com/a/12198561/1122270과 함께이 트릭을해야합니다. (하지만 각자의 코드가 예상대로 작동하지 않습니다. 각 li이 균등하게 배열되기를 바랍니다.) – cnst

[위에서 언급 한 링크] (https://stackoverflow.com/questions)로 인라인 블록을 시도해 보셨습니까?/8720931/can-css-detect-the-number-of-children-an-element-has/12198561 # 12198561)? – Anuresh

하나의 라인에서 각 LI LI가 정당화되도록하는 자동 열

답변

관련 문제