DL을 사용할 때 줄 바꿈되는 텍스트에 왼쪽 여백을 적용합니다.

Question

HTML을 변경할 수 없지만 CSS를 편집하고 기존 사이트와 일치하도록 스타일을 지정해야합니다. 기존 사이트에는 랩 할 수있을만큼 긴 제목이 없습니다. 그러나 이제 그들은 그렇게합니다.

DT 안에 링크가있는 DL이 있습니다. : before 요소를 사용하여 화살표를 적용하고 텍스트가 여러 줄로 바뀌면 텍스트가 올바르게 정렬되지 않는 경우를 제외하고 모두 훌륭하게 작동합니다.

두 번째 행의 텍스트 (텍스트가 커지면 다른 모든 텍스트)는 첫 번째 행에 맞춰야합니다. 나는 그 텍스트의 오른쪽에 얼마나 많은 텍스트가 있는지 상관없이 화살표가 자신의 것 위에 서기를 원합니다.

<dl class="clearfix"> 
<dt class="title"> 
    <a href="#">The Art of Lauhala (Pandanus Leaf) Weaving by Pohaku Kahoohanohano - Honokohau, Maui</a> 
</dt> 

Link to Fiddle

Answer 1

변경이처럼 CSS :

dl { 
    margin: 0; 
} 
dt { 
    vertical-align:top; 
    display:inline-block; 
    width:calc(100% - 15px) 
} 
dl:before { 
    vertical-align:top; 
    content:"> "; 
    display: inline-block; 
    width:10px; 
} 

설명 : 나는 012,343에 다음 두 요소를 폭을 inline-block 속성을 준

/10px 나는 용기의 폭을 알 수 없기 때문에, 나는 100 %를 가정한다, 그러나 그것은 나에게 width:calc(100% - 15px)

See fiddle here 따라서 그 dl:before의 10px 그래서 난 안전 재생 추가 5px와 calc property 추가 + 100 %를주고 것 값으로 놀아보기