한면이 굵은 글씨 일 때 2 열 CSS리스트가 끊어짐

이것은 내가 직설적이어야한다고 생각하는 것이지만 그것을 이해하는 것처럼 보일 수는 없으며 하나의 목록에 두 시간을 보내면 나에게 힘이된다.한면이 굵은 글씨 일 때 2 열 CSS리스트가 끊어짐

내가하려는 것은 한쪽에 "레이블"이 있고 다른 쪽에 값이있는 2 열 목록을 만드는 것입니다. 폰트 가중치를 정상적으로 유지하거나 양면을 굵게 표시하면 효과를 낼 수 있지만 레이블을 굵게 표시하고 정상적으로 값을 설정하자마자 계단을 올립니다.

A screenshot of it with bold

적용 가능한 CSS :

ul.info { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

ul.info li.name { 
    width: 150px; 
    float: left; 
    font-weight: bold; 
} 

ul.info li.value { 
}

html로

<ul class="info"> 
    <li class="name">Member Since</li> 
    <li class="value"><?=$user->registerTime ?></li> 

    <li class="name">Last Logged in</li> 
    <li class="value"><?=($user_login !== null ? $user_login->login_time : 'Never') ?></li> 

    <li class="name">Email verified?</li> 
    <li class="value"><?=($user->emailVerified ? 'Yes' : 'No') ?></li> 
</ul>

나는 대담한로 좁혀했지만, 그것은 이해가되지 않습니다 왜 그걸 망칠까요? 어떤 아이디어?

출처

2011-03-25 Tarka

가 나는 부동이 엇갈리게되는 것을되지 않는 이유를 설명 할 수 어떻게 든 추가되는 여분의 수직 공간을 갖는 대담한 요소까지 될 것입니다 생각한다. 일관된 line-height 속성이 목록 요소에 적용 되었습니까?

정렬되지 않은 목록보다는 정의 목록을 사용하는 것이 훨씬 나을 것입니다. 그렇게하면 dt과 dd 요소를 완전히 따로 스타일링 할 수 있습니다. 마크 업의 이점은 훨씬 더 의미가 있습니다.

출처

2011-03-25 13:37:06

어떻게'dl','dt','dd' 태그를 잊었습니까? 대신에 그것들을 사용했는데 (나는 동의 할 것이다), 그것은 완벽하게 작동한다. 감사 :) – Tarka

LI의 높이 또는 최소 높이를 굵게 표시된 글꼴의 높이보다 큰 픽셀 수치로 설정할 수 있습니다.

출처

2011-03-25 13:35:48 Paul

어떤 브라우저를 사용하십니까? 그것은 크롬에서 나를 위해 잘 작동합니다.
나는 유효한 xhtml을 생성하는 경우 스크립트 코드를 확인하는 것이 좋습니다.

proof

출처

2011-03-25 13:36:44 Damb

좋아, 내가 제공하는 코드에 문제가없는 유일한 사람인 것처럼 보입니다. – Damb

편집기에서 작업했지만 FF, IE, Chrome 및 Opera에서 내 사이트에서 테스트 한 결과, 모두 계단을 올렸습니다. 나는 그 사이트에 링크 할 것이지만 그것은 내부 링크이다. – Tarka

Ah : X 나쁜 소식 .. 편집인을 신뢰할 수 있다고 생각했습니다. 신경 쓰지 마세요 :) – Damb

한면이 굵은 글씨 일 때 2 열 CSS리스트가 끊어짐

답변

관련 문제