span 또는 div 래핑 방지

147

div고정 너비 의 요소 그룹을 컨테이너에 넣고 가로 스크롤 막대를 표시 하고 싶습니다 . div/의 span요소는, HTML (기본적으로 미개봉)에 나타나는 순서대로 왼쪽에서 오른쪽으로, 한 줄에 표시됩니다.

이렇게하면 가로 스크롤 막대가 나타나고 세로 스크롤 막대 대신 콘텐츠를 읽는 데 사용할 수 있습니다 (왼쪽에서 오른쪽으로).

컨테이너에 플로팅 한 다음 컨테이너에 white-space: nowrap스타일을 적용하려고했지만 슬프게도 여전히 랩으로 보입니다.

아이디어?

다음과 같이 보였습니다 :

.slideContainer {
    white-space: nowrap;
}
.slide { 
    width: 800px;
    float: left;
    display: inline;
}

<div class="slideContainer">
    <div class="slide">Some content</div>
    <div class="slide">More content</div>
    <div class="slide">Even More content!</div>
</div>

스 니펫 확장

업데이트 : 예를 들어 사이트 를
참조 하지만 다른 방법이 아닌 것에 대해서는 잘못되었습니다-기사가 오래되었다고 확신합니다.

html css

— cgp
소스

181

이 시도:

.slideContainer {
    overflow-x: scroll;
    white-space: nowrap;
}
.slide {
    display: inline-block;
    width: 600px;
    white-space: normal;
}

<div class="slideContainer">
    <span class="slide">Some content</span>
    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    <span class="slide">Even more content!</span>
</div>

스 니펫 확장

.slideContainer { overflow-x: scroll; }이 브라우저 를 읽을 때 지원하거나 지원하지 않는 브라우저를 생략 할 수 있으며이 컨테이너 대신 창에 스크롤 막대가 표시됩니다.

여기서 핵심은 display: inline-block입니다. 요즘에는 브라우저 간 지원 이 적절 하지만 평소와 같이 모든 대상 브라우저에서 테스트해야합니다.

— 론 데 베라
소스

1

사실, 나는이 프레젠테이션을 전체 프레젠테이션에서 분리 해 보았고 비교적 잘 작동하는 것 같았다 (적어도 내가 파이어 폭스 3, IE 7, 크롬, 오페라에서 관심있는 모든 것)

— cgp

white-space:normal포함 된 요소와 white-space:nowrap부모에 설정 하는 것만으로도 속임수가되었습니다. 매우 감사합니다!

— Noitidart

공백 : 기본값은 기본값이므로 설정하지 않아도 괜찮습니다.

— Parth

white-space: normal이 경우 기본값 white-space은 부모가 이미 무시 했기 때문에 @Parth는 반드시 자식에 설정해야합니다 nowrap.

— GullerYA

17

그것은 단지 이것과 함께 작동합니다 :

.slideContainer {
    white-space: nowrap;
}
.slide { 
    display: inline-block;
    width: 600px;
    white-space: normal;
}

나는 원래 가지고 float : left;있었고 그것이 제대로 작동하지 못하게했습니다.

이 솔루션을 게시 해 주셔서 감사합니다.

— 철거
소스

3

트위터의 같은 것을 사용하는 경우 특히 부트 스트랩을 , white-space: nowrap;아이에 패딩이나 마진을 적용 할 때 항상 CSS에서 작동하지 않습니다 div. 그러나 border: 20px solid transparent;패딩 / 여백 대신 동등한 스타일을 추가하면 일관되게 작동합니다.

— 브랜든
소스

1

언급했듯이 다음을 사용할 수 있습니다.

overflow: scroll;

필요할 때 스크롤 막대 만 나타나게하려면 "자동"옵션을 사용할 수 있습니다.

overflow: auto;

"floflow"속성을 "overflow"와 함께 사용해야한다고 생각하지 않지만 먼저 예제를 시도해야합니다.

— jthompson
소스

0

div가 몸의 너비를 벗어나지 않는 것처럼 보입니다. 다른 사업부 내에서도.

나는 이것을 테스트하기 위해 던졌다. (doctype없이) 생각대로 작동하지 않는다.

.slideContainer {
    overflow-x: scroll;
}
.slide {
    float: left;
}

<div class="slideContainer">
    <div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div>
    <div class="slide" style="background: #ff0">More content More content More content More content More content More content</div>
    <div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div>
</div>

스 니펫 확장

내가 생각하는 것은 내부 div가 iFrame을 통해로드 될 수 있다는 것입니다. 다른 페이지이므로 내용이 매우 넓을 수 있기 때문입니다.

— 올로 푸르 임금
소스

overflow-x 또는 scroll-x, 그것이 무엇인지 기억할 수 없습니다. 게으른 오늘.

— Kent Fredric