CSS는 LI를 중간에 세로로 배열합니다.

저는 21 픽셀 높이의 UL 영역 중간에 LI 요소가 수직으로 표시되어야하는 다음 HTML을 가지고 있습니다. 여기 내 HTML은 ...CSS는 LI를 중간에 세로로 배열합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     .MenuBar 
     { 
      padding: 0px; 
      border: 1px solid #036; 
      height: 21px; 
      font-size: 8pt; 
     } 
     .MenuBar li 
     { 
      display: inline; 
      padding-left: 20px; 
     } 
    </style> 
</head> 
<body> 
    <ul class="MenuBar"> 
     <li>Link 1</li><li>Link 2</li><li>Link 3</li></ul> 
</body> 
</html>

이 효과를 얻기 위해 어떻게 위의 HTML을 변경합니까?

출처

2010-03-04 John Livermore

LI 요소 표시 유형을 "인라인"으로 설정했기 때문에 세로 목록이 아닌 가로 목록을 만들려고한다고 가정합니다. 그래서이 시도 :

<style type="text/css"> 
    .MenuBar 
    { 
     padding: 0px; 
     border: 1px solid #036; 
     height: 21px; 
     font-size: 8pt; 
    } 
    .MenuBar li 
    { 
     display: inline; 
     line-height: 21px; 
     padding-left: 20px; 
    } 
</style>

출처

2010-03-04 16:39:57 Robusto

누구나 신속하게 답변 해 주셔서 감사합니다! –

은 당신이 원하는 것을 정확하게 얻을 수 있지만 목록을 수직으로 표시되도록하려면이 시도 할 수 없습니다 :

.MenuBar li 
    { 
     display: block; 
     padding-left: 20px; 
    }

그냥 block 대신 inline에 display 속성을 변경하십시오. 이것은 기본 동작이기도합니다.

출처

2010-03-04 16:36:27 Sarfraz

이게 당신이 쓴거야?

.MenuBar li 
    { 
     display: inline; 
     padding-left: 20px; 
     line-height: 21px; 
    }

Sarfraz와 마찬가지로, 나는 완전히 질문을 이해하고 있는지 잘 모르겠다.

출처

2010-03-04 16:39:44 Sniffer

추가 line-height:21px

출처

2010-03-04 16:41:16 Emily

이 높이로 설정해야합니다 첫 번째 아이로 <li /> 요소 내로 assistent 인라인 요소를 삽입하는 일을 가장 우아하고 신뢰할 수있는 방법 .MenuBar에 100 % (부모의 높이의 것, <li />)이며 세로 정렬은 중간으로 설정됩니다. 이것을 달성하려면 <span />을 넣을 수 있지만, 가장 편리한 방법은 li : after 의사 클래스를 사용하는 것입니다.

.MenuBar li:before 
{ 
    display: inline; 
    height: 100%; 
    vertical-align: middle; 
    content: ''; 
}

이렇게하면 높이 값 (21px 또는 무언가)을 하드 코딩 할 필요가 없습니다. 참조 : CSS vertical alignment text inside li

출처

2014-09-30 13:41:25

CSS는 LI를 중간에 세로로 배열합니다.

답변

관련 문제