정의 목록의 CSS 스타일링

제목/값 목록이 있습니다. 나는 정의 목록이 갈 길이라고 생각하고있다. 나는 제목과 정의가 같은 줄에 있기를 바라고, 제목이 서로 같은 너비를 갖기를 원하지는 않지만 제목마다 제목의 텍스트 양에 따라 너비를 갖기를 원합니다. 나는 또한 그 정의가 그들의 블록 안에 있고, 제목 아래로 흘러 나오지 않기를 바란다. 마지막으로 IE7 이상에서 작동하도록하고 싶습니다.정의 목록의 CSS 스타일링

좋아요, 다음 HTML/CSS를 생각해 보면 거의 효과가 있습니다. stackoverflow 윈도우에 CSS를 추가하는 방법을 알 수 없으므로 라이브 예제가 http://jsfiddle.net/s45Kd/입니다 (가능합니까?). 두 가지 문제.

먼저 정의에 화이트 스페이스가 없더라도 (예 : "이메일") 강제로 정의를 중단합니까?

두 번째 이유는 긴 정의가 제목 (예 : '일부 텍스트') 아래에 피가 흘러 나오는 이유는 무엇입니까?

나는 "그냥해라"고 인정할 것이지만, 나는 이것이 왜 일어나는지를 더 찾고 있습니다. 그래서 나는 더 잘 이해합니다.

처음 들어 당신에게

<style type="text/css"> 
    dl,dt,dd {padding:0;margin:0;} 
    dl {width:200px;border:1px dashed black;} 
    dt {float:left;font-weight:bolder; padding-right:5px; border:1px dashed red;} 
    dd {border:1px dashed blue;} 
</style> 
<dl> 
    <dt>First Name:</dt><dd>Bob</dd> 
    <dt>Last Name:</dt><dd>Johnson</dd> 
    <dt>Email:</dt><dd>[email protected]</dd> 
    <dt>Phone Number:</dt><dd>(555) 555-1212</dd> 
    <dt>Some Text:</dt><dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd> 
    <dt>Birthday</dt><dd>January 1st</dd> 
</dl>

출처

2013-03-31 user1032531

당신은 제목과 같은 줄에 표시 할 레이블을 원하는 경우에, 왜 당신이 사용하는 것이'dl' 마크 업, 기본적으로 별도의 라인을두고있는? 'table' 마크 업을 사용하면 기본 렌더링을 향상시키고 스타일을 향상시킬 수 있습니다. 그리고'dl'은'table' (실제로는 less)보다 더 의미가 없습니다. –

@ JukkaK.Korpela. 어쩌면 첫 번째 열에 단일 너비 열이 필요하지 않을 수도 있습니다. 레이블 태그일까요? – user1032531

@ JukkaK.Korpela. 또한 한두 줄의 기본 동작이 다른 태그보다 한 태그를 사용하는 데 영향을 주어야합니까? – user1032531

감사, 워드 랩 설정하여 해결할 수 있습니다 : 두 번째를 들어

word-wrap: break-word;

, 키는 모두 dt 및 dd 요소에 overflow: hidden;을 설정하는 것입니다 , 여전히 부동하는 동안에 만 dt. 이 jsFiddle에서

데모 : http://jsfiddle.net/fLPej/108/

출처

2013-03-31 19:31:41 metadept

감사합니다. 거의! 가치/정의 또는 오른쪽 열에 머물러 있기를 원했던 것이 무엇인지, 제목 아래에 자신을 위치시키지 않으려 고합니다. 말이 돼? – user1032531

아, 그럼 두 열이 엄밀한가요? Dt와 dd를 div로 묶어서 처리하고 싶지만, 내가 할 수있는 것을보고 놀아 보자. – metadept

예, 다른 태그를 사용하여 시각적 측면을 만들 수 있지만 좋은 의미 론적 접근이 가능하다고 판단해야합니다. 나는 며칠 동안 고생하고 포기할 것입니다. 첫 번째 "제목"열은 각 행에 대해 동일한 너비를 갖지 않습니다. 다시 한 번 감사드립니다! – user1032531

정의 목록의 CSS 스타일링

답변

관련 문제