100 % 너비가없는 디스플레이 블록

display 속성을 사용하여 다른 요소 아래에 표시되도록 범위 요소를 설정하고 싶습니다. 인라인 블록을 적용하려고했지만 성공하지 못했고, 요소의 너비를 100 %로 설정하는 것을 피할 수 있다면 블록을 사용할 수 있다고 생각했습니다 (요소가 "확장"되는 것을 원하지 않습니다). 이렇게 할 수 있습니까? 아니면 이런 종류의 문제를 해결하기위한 좋은 방법은 무엇입니까?

예 : 각 게시물 끝에 "추가 정보"링크를 설정하려는 뉴스 목록 (참고 : <a>대신 <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

업데이트 : 해결되었습니다. CSS에서 적용

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

귀하의 질문을 제대로 이해하고 있다면 다음 CSS가 a를 범위 아래로 띄우고 100 % 너비를 갖지 않도록합니다.

a {
    display: block; 
    float: left; 
    clear: left; 
}

사용 display: table.

이 답변은 30 자 이상이어야합니다. 20 개를 입력 했으므로 여기에 몇 개 더 있습니다.

당신이 사용할 수있는:

width: max-content;

참고 : 지원이 제한되어 있습니다. 지원 브라우저에 대한 전체 분석은 여기 에서 확인하십시오.

각 행을 자체 div에 유지하므로 ...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

그리고 CSS의 경우 :

.cell{display:inline-block}

원래 코드를 보지 않고 솔루션을 제공하기는 어렵습니다.

다시 : 너무 늦을 수있는 답변 (그러나 어쨌든이 페이지를 찾은 사람들에게는).

display:block;사용 대신 display:inline-block;

이 시도:

li a {
    width: 0px;
    white-space:nowrap;
}

이 문제가 발생하여 다음과 같이 해결했습니다.

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

"white-space : nowrap"은 충분한 공간이없는 경우 자식 (있는 경우)의 자식이 줄 바꿈하지 않도록합니다.

"공백 : nowrap"없이 :

"공백 : nowrap"사용 :

편집 : 그것은 나에게 자식 블록 부분 없이도 작동하는 것 같아서 잘 작동하는 것 같습니다.

.parent {
  white-space: nowrap;
  display: table;
}

다음을 사용할 수 있습니다.

display: inline-block;

링크 및 기타 요소에서 잘 작동합니다.